Когда вы используете прослушиватели событий для прослушивания событий и реагирования на них, вы можете задаться вопросом, чем отличаются события «касания» и события «щелчка» с точки зрения их производительности на сенсорных поверхностях и рабочих столах и могут ли они использоваться взаимозаменяемо для адаптивного веб-сайта или веб-сайта. приложение. В этой статье представлены различия и совпадения между этими двумя событиями, и мы надеемся, что сможем ответить на некоторые из ваших вопросов.
Давайте посмотрим на эти 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
Спасибо за чтение!