Làm cách nào tôi có thể nhận ra các sự kiện chạm bằng jQuery trong Safari cho iPad? Có thể không?

Có thể nhận ra các sự kiện chạm trên trình duyệt Safari của iPad bằng jQuery không?

Tôi đã sử dụng các sự kiện mouseOver và mouseOut trong một ứng dụng web. Có bất kỳ sự kiện tương tự nào cho trình duyệt Safari của iPad không vì không có sự kiện nào như mouseOut và mouseMove?

Core jQuery không có gì đặc biệt cho các sự kiện chạm, nhưng bạn có thể dễ dàng tự tạo bằng cách sử dụng các sự kiện sau

• bắt đầu
• cảm ứng
• cảm ứng
• cảm ứng

Ví dụ: touchmove

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

Điều này hoạt động trong hầu hết các trình duyệt dựa trên WebKit (bao gồm Android).

Đây là một số tài liệu tốt .

Nếu bạn đang sử dụng jQuery 1.7+, nó thậm chí còn đơn giản hơn tất cả các câu trả lời khác.

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

Cách tiếp cận đơn giản nhất là sử dụng thư viện JavaScript đa điểm như Hammer.js . Sau đó, bạn có thể viết mã như:

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

Và bạn có thể tiếp tục đi. Nó hỗ trợ chạm, chạm đúp, vuốt, giữ, biến đổi (tức là chụm) và kéo. Các sự kiện chạm cũng kích hoạt khi các hành động chuột tương đương xảy ra, vì vậy bạn không cần phải viết hai bộ xử lý sự kiện. Ồ, và bạn cần plugin jQuery nếu bạn muốn có thể viết theo cách jQueryish như tôi đã làm.

Sử dụng touchstart hoặc touchend một mình không phải là một giải pháp tốt, bởi vì nếu bạn cuộn trang, thiết bị sẽ phát hiện ra nó là chạm hoặc chạm quá. Vì vậy, cách tốt nhất để phát hiện sự kiện chạm và nhấp cùng lúc là chỉ phát hiện các sự kiện chạm không di chuyển màn hình (cuộn). Vì vậy, để làm điều này, chỉ cần thêm mã này vào ứng dụng của bạn:

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

       }
 });

Tôi đã thử nghiệm nó và nó hoạt động tốt cho tôi trên iPad và iPhone. Nó phát hiện chạm và có thể phân biệt cuộn và chạm dễ dàng.

Bạn có thể sử dụng .on () để chụp nhiều sự kiện và sau đó kiểm tra cảm ứng trên màn hình, ví dụ:

$('#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 không có gì đặc biệt, nhưng bạn có thể đọc trên jQuery Mobile Events trang về các sự kiện cảm ứng khác nhau, cũng hoạt động trên các thiết bị iOS khác.

Họ đang:

• gõ
• chạm và giữ
• vuốt
• swipeleft
• vuốt sang phải

Cũng lưu ý rằng trong các sự kiện cuộn (dựa trên cảm ứng trên thiết bị di động), thiết bị iOS sẽ đóng băng thao tác DOM trong khi cuộn.

Tôi đã có một chút lo lắng về việc chỉ sử dụng touchmove cho dự án của mình, vì nó dường như chỉ phát sáng khi cảm ứng của bạn di chuyển từ vị trí này sang vị trí khác (chứ không phải trên lần chạm đầu tiên). Vì vậy, tôi đã kết hợp nó với touchstart , và điều này dường như hoạt động rất tốt cho lần chạm đầu tiên và bất kỳ chuyển động nào.

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

Tôi vừa thử nghiệm plugin GitHub jQuery Touch Events của benmajor cho cả phiên bản 1.4 và 1.7+ của jQuery. Nó nhẹ và hoạt động hoàn hảo với cả hai onvà bindtrong khi cung cấp hỗ trợ cho một loạt các sự kiện chạm.