Cách nhận chỉ đường và khoảng cách với sự kiện swipe trên điện thoại di động jQuery

Question

Có thể nhận hướng và khoảng cách trong chức năng gọi lại khi sử dụng sự kiện swipe trên điện thoại di động jQuery không? Tôi đã không tìm thấy gì về nó trong số official docs.

TouchSwipe là giải pháp thay thế tốt, nhưng tôi cần mẫu đơn sự kiện tap jQuery Mobile và tôi không muốn đưa vào hai thư viện.

Answer 1

dụ làm việc: http://jsfiddle.net/Gajotres/K69AJ/

Ví dụ này được thực hiện với sự kiện jQuery Mobile vì vậy nó sẽ chỉ làm việc với jQuery Mobile. Thử nghiệm trên nền tảng Windows và Android.

Sự kiện Vmouse được thực hiện để thu hẹp sự khác biệt giữa các trình duyệt trên máy tính để bàn và thiết bị di động.

Cũng cần chú ý dòng này:

event.preventDefault(); 

Nó là cần thiết cho nền tảng Android, nền tảng có một lỗi khó chịu với phát hiện chuyển động cảm ứng. Báo cáo lỗi: http://code.google.com/p/android/issues/detail?id=19827

var gnStartX = 0; 
var gnStartY = 0; 
var gnEndX = 0; 
var gnEndY = 0; 

$(document).on('vmousedown', function(event){ 
    gnStartX = event.pageX; 
    gnStartY = event.pageY; 
    event.preventDefault(); 
}); 

$(document).on('vmouseup', function(event){ 
    gnEndX = event.pageX; 
    gnEndY = event.pageY; 
    var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2)); 

    if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) { 
     if(gnEndX > gnStartX) { 
      alert("Swipe Right - Distance " + distance + 'px'); 
     } else { 
      alert("Swipe Left - Distance " + distance + 'px');  
     } 
    } else { 
     if(gnEndY > gnStartY) { 
      alert("Swipe Bottom - Distance " + distance + 'px'); 
     } else { 
      alert("Swipe Top - Distance " + distance + 'px');  
     }   
    } 

    event.preventDefault();  
}); 

function nthroot(x, n) { 
    try { 
    var negate = n % 2 == 1 && x < 0; 
    if(negate) 
     x = -x; 
    var possible = Math.pow(x, 1/n); 
    n = Math.pow(possible, n); 
    if(Math.abs(x - n) < 1 && (x > 0 == n > 0)) 
     return negate ? -possible : possible; 
    } catch(e){} 
} 

Answer 2

Bạn cũng có thể sử dụng hammer.js. Có cả hai sự kiện - vuốt và nhấn. Trong hammer.js nó có thể nhận được các hướng dẫn và khoảng cách. Sự kiện nhấn cũng là một phần của các phiên bản jQuery mới hơn - bạn không cần phải bao gồm jquery-mobile chỉ dành cho sự kiện nhấn.

Documentation hammer.js

Hy vọng nó phù hợp với bạn.

Answer 3

Có một plugin khác có sẵn để xử lý tất cả các sự kiện chạm. Vui lòng kiểm tra ra

http://quojs.tapquo.com/

https://github.com/soyjavi/quojs