獨立的jQuery「觸摸」方法？

Question

所以，我正在尋求實現一個插件的功能，這個插件是用來從支持觸摸的互聯網設備（如iPhone，iPad或Android）上讀取觸摸「滑動」的。

那裏有什麼嗎？我並不是在尋找像jQtouch一樣完整的東西，但是正在考慮對我需要的代碼進行逆向工程。

對此方法的最佳方法有任何建議嗎？一小段代碼已經可用？

附錄：我後來認識到，解決方案不會嚴格的jQuery，因爲我很確定沒有任何內置的方法來處理這個問題。我希望標準的Javascript能夠找到答案。

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() }, 
}) 

，這是你如何檢測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

還有jQuery.touchwipe在http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Answer 3

最小，最的jQuery式的解決方案是在這裏：https://github.com/eikes/jquery.swipe-events.js