Когда вы используете прослушиватели событий для прослушивания событий и реагирования на них, вы можете задаться вопросом, чем отличаются события «касания» и события «щелчка» с точки зрения их производительности на сенсорных поверхностях и рабочих столах и могут ли они использоваться взаимозаменяемо для адаптивного веб-сайта или веб-сайта. приложение. В этой статье представлены различия и совпадения между этими двумя событиями, и мы надеемся, что сможем ответить на некоторые из ваших вопросов.

Давайте посмотрим на эти 2 события с точки зрения их корней…

Определение событий Click:

Они возникают, когда кнопку указывающего устройства нажимают, а затем отпускают, пока указатель все еще внутри элемента (Элемент: Click Event — Web APIs | MDN, n.d.)

Определение сенсорных событий:

Они происходят, когда состояние касания на поверхности изменяется, которое может быть началом, перемещением, окончанием или отменой (* Касание – это единственная точка контакта между пользователем и сенсорной поверхностью)(События касания , нд)

Из приведенного выше определения мы можем знать, что…

Разница между кликом и касанием

1. Количество точек соприкосновения

  • Событие Click может разрешить только 1 точку контакта между указателем и элементом.
  • Событие касания может обрабатывать несколько точек касания (например, 2 пальца) в разных местах сенсорной поверхности.

2. Продолжительность мероприятия

  • Событие Click может произойти только один раз при нажатии и отпускании указывающего устройства внутри элемента.
  • События касания могут происходить в течение определенного периода времени с момента начала касания до его окончания. Он имеет различные элементы управления для касания, с 3 общими элементами управления, такими как touchstart, touchmove, touchend. Для каждого касания внутри события касания также есть другие атрибуты, такие как позиции (например, pageX, pageY).

Но как перекрываются события касания и щелчка? Могут ли они использоваться взаимозаменяемо? Следующий пример кода может решить ваш вопрос.

Попробуйте этот код как на сенсорных экранах, так и на настольных компьютерах, чтобы увидеть, могут ли кнопки срабатывать и в какой ситуации: Ссылка на CodePen.

Внутри кода я использовал разные типы прослушивателей событий на кнопках.

Резюме: из примера кода видно, что…

  • Событие щелчка может и может быть активировано только на сенсорной поверхности, когда пользователь касается одной точки поверхности, а затем уходит. В приведенной выше ситуации прикосновение также может быть распознано как щелчок, который может быть прослушан событием щелчка.
  • События Touchstart могут быть активированы, когда пользователь впервые коснется его. События касания могут быть активированы, когда пользователь касается его и уходит. В большинстве ситуаций они имеют тот же эффект, что и событие клика.
  • События кликов могут запускаться как на сенсорных поверхностях, так и на настольных компьютерах, поэтому это безопасный выбор для использования в адаптивном дизайне.
  • Однако при использовании указателя на рабочем столе сенсорные события не могут быть инициированы, поскольку сенсорное взаимодействие отсутствует.

Ссылка:

Элемент: событие клика — веб-API | МДН. (н.д.). Разработчик.mozilla.org. https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

События касания. (н.д.). Веб-документы MDN. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Спасибо за чтение!