Этот вопрос является обновлением этого, но для современных браузеров. (К сожалению, ответы здесь устарели и/или не написаны на стандартном JavaScript). По сути, я хочу выполнить простой тест, чтобы определить, было ли событие click вызвано касанием или вводом с помощью мыши.
Единственный ответ на вышеупомянутый вопрос, который надежен и все еще работает, — это использовать свойство event.pointerType. Однако event.pointerType, похоже, определяется в Chrome только для события click.
Хотя я мог бы использовать события указателя (например, pointerup), для которых event.pointerType определено для всех браузеров, pointerup ведет себя иначе, чем click, и больше похоже на mouseup. Другими словами, он не регистрирует только истинные клики, но также срабатывает, если указатель был перетащен или запущен на другом элементе.
По этой причине я хотел бы, чтобы это работало с регулярными click событиями. Если кто-нибудь знает, как я могу надежно определить метод ввода, я буду очень признателен.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Решение может заключаться в том, чтобы сначала иметь flag, чтобы проверить, прикоснулись ли вы к нему или нет, назовем его isTouched, это flagfalse по умолчанию, и создайте прослушиватель событий для события touchstart, и как только оно сработает, оно превратится isTouched в true, также создайте еще один прослушиватель событий для click и внутри него условно проверьте, является ли isTouchedtrue, затем сбросьте isTouched на false, если это с false, то событие касания не было вызвано, так что это просто событие click.
let isTouched = false;
const testButton = document.getElementById('test');
testButton.addEventListener('touchstart', function(e) {
isTouched = true;
});
testButton.addEventListener('click', function(e) {
if (isTouched) {
alert('Triggered by touch');
isTouched = false;
} else {
alert('Triggered by mouse click');
}
});<button id = "test">Test</button>У вас правильная идея, но ОП сказал, что им нужно ванильное решение JS (также вопрос не был помечен как w/JQuery).
@ScottMarcus О, я этого не заметил, я обновлю код.
Спасибо! Это должно работать достаточно хорошо!
Подход, аналогичный принятому ответу, но скрытие реализации путем отправки PointerEvent для тех браузеров, которые еще не поддерживают событие click как PointerEvent
Мы можем создать функцию-оболочку, которая добавляет прослушиватель кликов. и обрабатывает логику сенсорных устройств
function addPointerClickEvent(target, listener, options) {
let isTouch = false
const listenerWrapper = event => {
if (!(event instanceof PointerEvent)) {
const pointerType = isTouch ? 'touch' : 'mouse'
const eventOptions = {...event, pointerType}
const pointerEvent = new PointerEvent('click', eventOptions)
target.dispatchEvent(pointerEvent)
isTouch = false
return
}
listener.call(target, event)
}
target.addEventListener(
'touchstart',
event => isTouch = true,
{capture: true},
)
target.addEventListener('click', listenerWrapper, options)
}
И как только у нас есть функция, мы используем ее вот так
const target = document.querySelector('.target')
addPointerClickEvent(target, event => {
console.info(event.type, event.pointerType, event)
})
Настройте обработчик события
touchstartнаdocumentи установите в этом обработчике логическую переменную наtrue. Затем вы можете просто просмотреть эту переменную, когда это необходимо.