Как я могу захватить событие "коснуться" пользователя с помощью чистого JS? К сожалению, я не могу использовать какие-либо библиотеки.
Захват события "нажмите" с использованием чистого JavaScript
Ответ 1
Событие click
запускается при щелчке мыши, а также при нажатии сенсорного экрана.
Событие touchstart
запускается при касании экрана.
Событие touchend
запускается при завершении касания. Если действие по умолчанию предотвращено, событие click
не будет запускаться.
Ответ 2
Это не мой код, но я не могу вспомнить, откуда я его получил, он успешно используется. Он использует jQuery, но не содержит дополнительных библиотек или плагинов для самой обработки перехода.
$.event.special.tap = {
setup: function(data, namespaces) {
var $elem = $(this);
$elem.bind('touchstart', $.event.special.tap.handler)
.bind('touchmove', $.event.special.tap.handler)
.bind('touchend', $.event.special.tap.handler);
},
teardown: function(namespaces) {
var $elem = $(this);
$elem.unbind('touchstart', $.event.special.tap.handler)
.unbind('touchmove', $.event.special.tap.handler)
.unbind('touchend', $.event.special.tap.handler);
},
handler: function(event) {
event.preventDefault();
var $elem = $(this);
$elem.data(event.type, 1);
if (event.type === 'touchend' && !$elem.data('touchmove')) {
event.type = 'tap';
$.event.handle.apply(this, arguments);
} else if ($elem.data('touchend')) {
$elem.removeData('touchstart touchmove touchend');
}
}
};
$('.thumb img').bind('tap', function() {
//bind tap event to an img tag with the class thumb
}
Я использовал это для проекта исключительно для iPad, поэтому может потребоваться настройка для работы на рабочем столе и планшете вместе.
Ответ 3
Есть touchstart
, touchend
и другие события. Вы можете добавить для них прослушиватели событий следующим образом:
var el = document.getElementById('test');
el.addEventListener('touchstart', touchHandler);
Более подробную информацию о локальных событиях DOM вы можете найти на веб-сайте MDN.
Ответ 4
Я написал немного script сам. Это не в чистом виде, но отлично работает для меня. Это предотвращает выполнение script при прокрутке, что означает, что script срабатывает только при событии 'tap'.
$(element)
.on('touchstart', function () {
$(this).data('moved', '0');
})
.on('touchmove', function () {
$(this).data('moved', '1');
})
.on('touchend', function () {
if($(this).data('moved') == 0){
// HERE YOUR CODE TO EXECUTE ON TAP-EVENT
}
});