Как распознать сенсорные события с помощью jQuery в Safari для iPad? Возможно ли это?
можно ли распознавать события касания в браузере Safari iPad с помощью jQuery?
Я использовал события mouseOver и mouseOut в веб-приложении. Существуют ли подобные события для браузера Safari iPad, поскольку нет таких событий, как mouseOut, mouseMove?
8 ответов
Core jQuery не имеет ничего особенного для сенсорных событий, но вы можете легко создать свой собственный, используя следующие события
- touchstart
- touchmove
- touchend
- touchcancel
например,touchmove
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
это работает в большинстве браузеров на основе webkit (ВКЛ. андроид.)
Если вы используете jQuery 1.7+, это даже проще, чем все эти другие ответы.
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
самый простой подход-использовать мультитач JavaScript библиотека, как молоток.js. Затем вы можете написать код:
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // And double click
// Zoom-in
})
.bind('dragstart', function(e) { // And mousedown
// Get ready to drag
})
.bind('drag', function(e) { // And mousemove when mousedown
// Pan the image
})
.bind('dragend', function(e) { // And mouseup
// Finish the drag
});
и вы можете продолжать идти. Он поддерживает tap, double tap, swipe, hold, transform (т. е. pinch) и перетаскивание. События касания также срабатывают, когда происходят эквивалентные действия мыши, поэтому вам не нужно писать два набора обработчиков событий. О, и вам нужен плагин jQuery, если вы хотите иметь возможность писать в jQueryish способом, как я сделал.
использование только touchstart или touchend не является хорошим решением, потому что при прокрутке страницы устройство обнаруживает ее как touch или tap. Таким образом, лучший способ обнаружить событие tap и click одновременно-это просто обнаружить события касания, которые не перемещают экран(прокрутка). Так для этого просто добавьте этот код в приложение:
$(document).on('touchstart', function() {
detectTap = true; //detects all touch events
});
$(document).on('touchmove', function() {
detectTap = false; //Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true; //detects click events
if (detectTap){
//here you can write the function or codes you wanna execute on tap
}
});
я протестировал его, и он отлично работает для меня на iPad и iPhone. Он обнаруживает кран и может легко различать прокрутку крана и касания.
можно использовать .on () для захвата нескольких событий, а затем проверить для сенсорного экрана, например:
$('#selector')
.on('touchstart mousedown', function(e){
e.preventDefault();
var touch = e.touches[0];
if(touch){
// Do some stuff
}
else {
// Do some other stuff
}
});
jQuery Core не имеет ничего особенного, но вы можете прочитать на jQuery мобильные события страница о различных сенсорных событиях,которые также работают на других устройствах, кроме iOS.
Они:
- нажми
- taphold
- салфетки
- swipeleft
- swiperight
обратите внимание также, что во время событий прокрутки (на основе касания на мобильных устройствах) устройства iOS зависают при манипуляции DOM прокрутка.
Я немного беспокоился об использовании только touchmove для моего проекта, так как он, кажется, срабатывает только тогда, когда ваше касание перемещается из одного места в другое (а не на начальном касании). Поэтому я объединил его с touchstart, и это, кажется, работает очень хорошо для начального касания и движения.
<script>
function doTouch(e) {
e.preventDefault();
var touch = e.touches[0];
document.getElementById("xtext").innerHTML = touch.pageX;
document.getElementById("ytext").innerHTML = touch.pageY;
}
document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);
</script>
X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>
Я знаю, что я немного опоздал на это, но просто проверял плагин событий касания GitHub jQuery benmajor для версий jQuery 1.4 и 1.7+ . Он легкий и отлично работает с обоими on
и bind
и поддерживает исчерпывающий набор сенсорных событий.