Phương pháp "chạm" jQuery độc lập?

Question

Vì vậy, tôi đang tìm cách triển khai khả năng cho plugin mà tôi đã viết để đọc một cú chạm "vuốt" từ thiết bị internet có khả năng cảm ứng, như iPhone, iPad hoặc Android.

Có điều gì ở ngoài đó không? Tôi không tìm kiếm một cái gì đó đầy đủ như jQtouch, mặc dù đã xem xét kỹ thuật đảo ngược mã tôi sẽ cần ra khỏi nó.

Bất kỳ đề xuất nào về cách tốt nhất để tiếp cận điều này? Một đoạn mã đã có sẵn?

Hợp đồng bổ sung: Tôi nhận ra rằng việc giải quyết sẽ không hoàn toàn là jQuery, vì tôi khá chắc chắn không có bất kỳ phương pháp tích hợp nào để xử lý việc này. Tôi mong đợi Javascript tiêu chuẩn để tìm chính nó trong câu trả lời.

Answer 1

(function($) { 
$.fn.swipe = function(options) { 
    // Default thresholds & swipe functions 
    var defaults = { 
     threshold: { 
      x: 30, 
      y: 10 
     }, 
     swipeLeft: function() { alert('swiped left') }, 
     swipeRight: function() { alert('swiped right') }, 
     preventDefaultEvents: true 
    }; 

    var options = $.extend(defaults, options); 

    if (!this) return false; 

    return this.each(function() { 

     var me = $(this) 

     // Private variables for each element 
     var originalCoord = { x: 0, y: 0 } 
     var finalCoord = { x: 0, y: 0 } 

     // Screen touched, store the original coordinate 
     function touchStart(event) { 
      console.log('Starting swipe gesture...') 
      originalCoord.x = event.targetTouches[0].pageX 
      originalCoord.y = event.targetTouches[0].pageY 
     } 

     // Store coordinates as finger is swiping 
     function touchMove(event) { 
      if (defaults.preventDefaultEvents) 
       event.preventDefault(); 
      finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates 
      finalCoord.y = event.targetTouches[0].pageY 
     } 

     // Done Swiping 
     // Swipe should only be on X axis, ignore if swipe on Y axis 
     // Calculate if the swipe was left or right 
     function touchEnd(event) { 
      console.log('Ending swipe gesture...') 
      var changeY = originalCoord.y - finalCoord.y 
      if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { 
       changeX = originalCoord.x - finalCoord.x 

       if(changeX > defaults.threshold.x) { 
        defaults.swipeLeft() 
       } 
       if(changeX < (defaults.threshold.x*-1)) { 
        defaults.swipeRight() 
       } 
      } 
     } 

     // Swipe was canceled 
     function touchCancel(event) { 
      console.log('Canceling swipe gesture...') 
     } 

     // Add gestures to all swipable areas 
     this.addEventListener("touchstart", touchStart, false); 
     this.addEventListener("touchmove", touchMove, false); 
     this.addEventListener("touchend", touchEnd, false); 
     this.addEventListener("touchcancel", touchCancel, false); 

    }); 
}; 
})(jQuery); 


$('.swipe').swipe({ 
swipeLeft: function() { $('#someDiv').fadeIn() }, 
swipeRight: function() { $('#someDiv').fadeOut() }, 
}) 

và đây là cách bạn phát hiện iphone

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { 
    if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page"; 
} 

Answer 2

Ngoài ra còn có jQuery.touchwipe tại http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Answer 3

Các giải pháp nhỏ nhất và hầu hết jQuery-esque là ở đây: https://github.com/eikes/jquery.swipe-events.js