Как распознать события касания, используя jQuery в Safari для iPad? Является ли это возможным?
Можно ли распознавать сенсорные события в браузере iPad Safari с помощью jQuery?
Я использовал события mouseOver и mouseOut в веб-приложении. Есть ли подобные события для браузера Safari для iPad, поскольку нет таких событий, как mouseOut, mouseMove?
Ответы
Ответ 1
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 (включая android).
Вот некоторая хорошая документация:
Ответ 2
Если вы используете jQuery 1.7+, это даже проще, чем все остальные ответы.
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
Ответ 3
Самый простой способ - использовать мультитачную библиотеку 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 способом, как и я.
Ответ 4
Вы можете использовать .on() для захвата нескольких событий, а затем проверить сенсорный экран, например:
$('#selector')
.on('touchstart mousedown', function(e){
e.preventDefault();
var touch = e.touches[0];
if(touch){
// Do some stuff
}
else {
// Do some other stuff
}
});
Ответ 5
jQuery Core не имеет ничего особенного, но вы можете прочитать на странице jQuery Mobile Events о различных событиях касания, которые также работают на других чем устройства iOS.
Это:
- нажмите
- taphold
- салфетки
- swipeleft
- swiperight
Обратите внимание также, что во время событий прокрутки (на основе касания на мобильных устройствах) устройства iOS замораживают манипуляции с DOM во время прокрутки.
Ответ 6
Использование 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. Он обнаруживает краны и может легко различать касание и касание.
Ответ 7
Я немного беспокоился о том, что использовал только 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>
Ответ 8
Я знаю, что немного опоздал на это, но просто протестировал benmajor GitHub jQuery Touch Events plugin для версий 1.4 и 1.7+ JQuery. Он легкий и отлично работает с on
и bind
, обеспечивая при этом поддержку исчерпывающего набора событий касания.