Проверьте, был ли клик вызван прикосновением в современных браузерах

Этот вопрос является обновлением этого, но для современных браузеров. (К сожалению, ответы здесь устарели и/или не написаны на стандартном JavaScript). По сути, я хочу выполнить простой тест, чтобы определить, было ли событие click вызвано касанием или вводом с помощью мыши.

Единственный ответ на вышеупомянутый вопрос, который надежен и все еще работает, — это использовать свойство event.pointerType. Однако event.pointerType, похоже, определяется в Chrome только для события click.

Хотя я мог бы использовать события указателя (например, pointerup), для которых event.pointerType определено для всех браузеров, pointerup ведет себя иначе, чем click, и больше похоже на mouseup. Другими словами, он не регистрирует только истинные клики, но также срабатывает, если указатель был перетащен или запущен на другом элементе.

По этой причине я хотел бы, чтобы это работало с регулярными click событиями. Если кто-нибудь знает, как я могу надежно определить метод ввода, я буду очень признателен.

Настройте обработчик события touchstart на document и установите в этом обработчике логическую переменную на true. Затем вы можете просто просмотреть эту переменную, когда это необходимо.

Scott Marcus 16.05.2024 20:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
77
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Решение может заключаться в том, чтобы сначала иметь 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).

Scott Marcus 16.05.2024 20:41

@ScottMarcus О, я этого не заметил, я обновлю код.

Mina 16.05.2024 20:42

Спасибо! Это должно работать достаточно хорошо!

Ood 16.05.2024 20:46

Подход, аналогичный принятому ответу, но скрытие реализации путем отправки 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)
})

Другие вопросы по теме