Можно ли распознавать сенсорные события в браузере iPad Safari с помощью jQuery?
Я использовал события mouseOver и mouseOut в веб-приложении. Есть ли подобные события для браузера Safari для iPad, поскольку нет таких событий, как mouseOut, mouseMove?
Core jQuery не имеет ничего особенного для сенсорных событий, но вы можете легко создавать свои собственные, используя следующие события
Например, touchmove
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
Это работает в большинстве браузеров на основе webkit (включая android).
Если вы используете jQuery 1.7+, это даже проще, чем все остальные ответы.
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
Самый простой способ - использовать мультитачную библиотеку JavaScript, такую как Hammer.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
});
И вы можете продолжать идти. Он поддерживает кран, двойное нажатие, проведите пальцем, удерживайте, трансформируйте (т.е. Щепотку) и перетащите. События касания также срабатывают, когда происходят эквивалентные действия мыши, поэтому вам не нужно писать два набора обработчиков событий. О, и вам нужен плагин jQuery, если вы хотите, чтобы я мог писать в jQueryish способом, как и я.
Вы можете использовать .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 Mobile Events о различных событиях касания, которые также работают на других чем устройства iOS.
Это:
Обратите внимание также, что во время событий прокрутки (на основе касания на мобильных устройствах) устройства iOS замораживают манипуляции с DOM во время прокрутки.
Использование touchstart или touchhend не является хорошим решением, потому что если вы прокручиваете страницу, устройство обнаруживает ее как касание или коснитесь. Таким образом, лучший способ одновременного обнаружения события нажатия и клика - это просто обнаружить события касания, которые не перемещают экран (прокрутка). Поэтому для этого просто добавьте этот код в свое приложение:
$(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. Он обнаруживает краны и может легко различать касание и касание.
Я немного беспокоился о том, что использовал только 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>
Я знаю, что немного опоздал на это, но просто протестировал benmajor GitHub jQuery Touch Events plugin для версий 1.4 и 1.7+ JQuery. Он легкий и отлично работает с on и bind, обеспечивая при этом поддержку исчерпывающего набора событий касания.