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


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

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

8 177

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
    });

и вы можете продолжать идти. Он поддерживает касание, двойное касание, смахивание, проводить, трансформировать (например, Пинча) и перетащить. События касания также срабатывают, когда происходят эквивалентные действия мыши, поэтому вам не нужно писать два набора обработчиков событий. О, и вам нужен плагин jQuery, если вы хотите иметь возможность писать в jQueryish, как я сделал.

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

$(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 не имеет ничего особенного, но вы можете прочитать о jQuery Mobile Events страница о различных событиях касания, которые также работают на других устройствах, кроме 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 Touch от benmajor для версий jQuery 1.4 и 1.7+. Он легкий и отлично работает с обоими on и bind обеспечивая поддержку для исчерпывающего набора событий касания.