Как распознать сенсорные события с помощью jQuery в Safari для iPad? Является ли это возможным?

Question

Можно ли распознавать сенсорные события в браузере Safari на iPad с помощью jQuery?

Я использовал события mouseOver и mouseOut в веб-приложении.Существуют ли подобные события для браузера Safari на iPad, поскольку нет таких событий, как mouseOut, mouseMove?

Answer 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).

Вот хорошая документация:

Answer 2

Если вы используете jQuery 1.7+, это даже проще, чем все остальные ответы.

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });

Answer 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, как я.

Answer 4

Использование сенсорного запуска или касания в одиночку не является хорошим решением, поскольку при прокрутке страницы устройство распознает ее как касание или касание. Таким образом, лучший способ обнаружить событие касания и нажатия одновременно - просто обнаружить события касания, которые не перемещают экран (прокрутка). Для этого просто добавьте этот код в ваше приложение:

$(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. Он обнаруживает касание и может легко различать касание и прокрутку касанием.

Answer 5

Вы можете использовать .on () , чтобы захватить несколько событий, а затем проверить на сенсорном экране, например ::100100

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});

Answer 6

В jQuery Core нет ничего особенного, но вы можете прочитать на jQuery Mobile Events страницу о различных сенсорных событиях, которые также работают на других устройствах, кроме iOS.

Это:

• нажмите
• taphold
• салфетки
• swipeleft
• swiperight

Также обратите внимание, что во время событий прокрутки (на основе касания на мобильных устройствах) устройства iOS блокируют манипуляции с DOM при прокрутке.

Answer 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>

Answer 8

Я знаю, что немного опоздал, но только что протестировал плагин Benmajor's JQuery Touch Events для версий JQuery как 1.4, так и 1.7+. Он легок и отлично работает как с on, так и с bind, обеспечивая при этом исчерпывающий набор сенсорных событий.