İPad için Safari'de jQuery kullanarak dokunma olaylarını nasıl tanıyabilirim? Mümkün mü?

JQuery kullanarak iPad'in Safari tarayıcısındaki dokunma olaylarını tanımak mümkün müdür?

Bir web uygulamasında mouseOver ve mouseOut olaylarını kullandım. MouseOut ve mouseMove gibi bir etkinlik olmadığından iPad'in Safari tarayıcısı için benzer etkinlikler var mı?

Core jQuery'nin dokunma olayları için özel bir şeyi yoktur, ancak aşağıdaki olayları kullanarak kendinizinkini kolayca oluşturabilirsiniz.

• touchstart
• touchmove
• touchEnd
• touchcancel

Örneğin, touchmove

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

Bu, çoğu WebKit tabanlı tarayıcıda (Android dahil) çalışır.

İşte bazı iyi belgeler .

JQuery 1.7+ kullanıyorsanız, diğer tüm cevaplardan daha da basittir.

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

En basit yaklaşım Hammer.js gibi çok dokunuşlu bir JavaScript kitaplığı kullanmaktır . Sonra şöyle bir kod yazabilirsiniz:

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

Ve devam edebilirsin. Musluk, çift dokunma, çekme, tutma, dönüştürme (çimdikleme) ve sürüklemeyi destekler. Dokunmatik olaylar, eşdeğer fare eylemleri gerçekleştiğinde de tetiklenir, bu nedenle iki olay kümesi işleyicisi yazmanıza gerek yoktur. Oh, ve benim yaptığım gibi jQueryish şekilde yazmak istiyorsanız jQuery eklentisine ihtiyacınız var.

Touchstart veya touchend'i tek başına kullanmak iyi bir çözüm değildir, çünkü sayfayı kaydırırsanız cihaz da dokunma veya dokunma olarak algılar. Bu nedenle, bir dokun ve tıkla olayını aynı anda algılamanın en iyi yolu, yalnızca ekranı hareket ettirmeyen dokunma olaylarını (kaydırma) algılamaktır. Bunu yapmak için, bu kodu uygulamanıza eklemeniz yeterlidir:

$(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 want to execute on tap

       }
 });

Test ettim ve iPad ve iPhone'da benim için iyi çalışıyor. Musluğu algılar ve dokun ve dokunarak kaydırmayı kolayca ayırt edebilir.

Birden çok olayı yakalamak için .on () öğesini kullanabilir ve ardından ekranda dokunma olup olmadığını test edebilirsiniz, örneğin:

$('#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'un özel bir şeyi yoktur, ancak jQuery Mobile Events sayfasında iOS cihazlarının dışında da çalışan farklı dokunma olayları hakkında okuyabilirsiniz .

Onlar:

• dokunmak
• basılı tut
• Tokatlamak
• sola sürükle
• sağa kaydır

Ayrıca kaydırma etkinlikleri sırasında (mobil cihazlarda dokunmaya dayalı olarak) iOS cihazlarının kaydırma sırasında DOM manipülasyonunu dondurduğuna dikkat edin.

Projem için sadece touchmove kullanma konusunda biraz endişeliydim , çünkü sadece dokunuşunuz bir konumdan diğerine geçtiğinde (ilk dokunuşta değil) ateş ediyor gibi görünüyor. Bu yüzden onu touchstart ile birleştirdim ve bu ilk dokunuş ve herhangi bir hareket için çok iyi çalışıyor gibi görünüyor.

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

Ben jamau'nun 1.4 ve 1.7+ sürümleri için benmajor'un GitHub jQuery Touch Events eklentisini test ettim . Hafiftir ve her ikisiyle de mükemmel çalışır onve bindkapsamlı dokunma olayları için destek sağlar.