обнаружение кликов и событий касания с помощью ванили javascript

Question

Добрый день. Я хотел бы получить метку первого щелчка или коснуться страницы. Эта страница может быть загружена в обычном браузере или в веб-браузере, поэтому лучше использовать ванильный javascript без какой-либо библиотеки.

Возможно ли это достичь? Или я должен использовать какой-то jQuery или что-то еще? Я только хотел бы сохранить Date.now() первого взаимодействия.

Answer 1

Если вы хотите, чтобы слушать за первый клик вы могли бы сделать что-то простое, как это:

window.onclick = function() { 
    var timeStamp = Date.now(); 
    console.log(timeStamp); 
    //do manipulations, send data to server/anything you want to do 

    //unbind window.onclick (resetting it to empty function) 
    window.onclick = function() {} 
} 

Вы можете прочитать больше о onclick на MDN
записки, что это будет отвязать каждый OnClick привязанный к самому объекту окна, так как у вас может быть только один слушатель. Существует, однако, another method, который приносит следующие преимущества перед делать это window.onclick = function() { ... } вещь:

1. Это позволяет добавлять более одного обработчика для события. Это особенно полезно для библиотек DHTML или расширений Mozilla, которые должны хорошо работать с другими библиотеками/расширениями.
2. Это дает вам более тонкое управление фазой, когда слушатель активируется (захват против пузырьков)
3. Он работает с любым элементом DOM, а не только с элементами HTML.

Так что это в основном позволяет, например, добавлять события, как это:

//first event listener 
window.addEventListener('click', function() { console.log('click1'); }); 
//second event listener (also a click) 
window.addEventListener('click', function() { console.log('click2'); }); 

приведенный выше пример будет выводить следующее в консоли:

"click1" 
"click2" 

browser support для addEventListener достаточно хорошо, даже если вам нужно поддерживать старые браузеры, вам нужно будет осторожно протестировать, так как будут разные реализации в разных браузерах.

Для звонков с сенсорными устройствами (в большинстве случаев) конвертируется в касание с задержкой в ​​300 мс, чтобы проверить наличие двойных кранов, но это не все, но вполне последовательно реализовано.

На MDN есть что-то около Touch Web API, но если вы прокрутите вниз, нет никакой реальной поддержки для него, в других библиотеках реализуется код, который использует события мыши, которые переводится на клики на устройствах и используют это с некоторой оберткой объекта для запуска выкл пользовательские события касания, Hammer.js - одна из этих библиотек - эта, вероятно, немного умнее в смысле, вероятно, используя реальные события касания, если они существуют, но я никогда не использовал Hammer.js раньше.