jQuery Touchwipe - vô hiệu hóa mặc định di chuyển cho 1 trục chỉ

Question

Im sử dụng plugin jQuery Touchwipe: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Với preventDefaultEvents: đúng có thể của nó để dissable mặc định kéo behavour trên iPhone. Tuy nhiên những gì tôi cần là để dissable hành vi mặc định trong 1 trục chỉ. Tôi cần người dùng có thể kéo để cuộn lên và xuống, nhưng việc kéo từ trái sang phải cần được tắt và chức năng của tôi sẽ kích hoạt. Cảm ơn

Answer 1

Tôi đã có nhu cầu tương tự và mở rộng plugin touchwipe để chuyển sự kiện cho các cuộc gọi lại wipeLeft, wipeRight, wipeUp và wipeDown. Điều đó cho phép tôi đặt preventDefaultEvents: false trong cấu hình và sau đó trong các cuộc gọi lại cụ thể của tôi nếu cần, hãy làm điều đầu tiên: e.preventDefault();.

Tôi đã gửi sửa đổi cho tác giả plugin.

Plugin chỉnh sửa:

(function($) { 
$.fn.touchwipe = function(settings) { 
    var config = { 
      min_move_x: 20, 
      min_move_y: 20, 
      wipeLeft: function(e) { }, 
      wipeRight: function(e) { }, 
      wipeUp: function(e) { }, 
      wipeDown: function(e) { }, 
      preventDefaultEvents: true 
    }; 

    if (settings) $.extend(config, settings); 

    this.each(function() { 
     var startX; 
     var startY; 
     var isMoving = false; 

     function cancelTouch() { 
      this.removeEventListener('touchmove', onTouchMove); 
      startX = null; 
      isMoving = false; 
     } 

     function onTouchMove(e) { 
      if(config.preventDefaultEvents) { 
       e.preventDefault(); 
      } 
      if(isMoving) { 
       var x = e.touches[0].pageX; 
       var y = e.touches[0].pageY; 
       var dx = startX - x; 
       var dy = startY - y; 
       if(Math.abs(dx) >= config.min_move_x) { 
        cancelTouch(); 
        if(dx > 0) { 
         config.wipeLeft(e); 
        } 
        else { 
         config.wipeRight(e); 
        } 
       } 
       else if(Math.abs(dy) >= config.min_move_y) { 
         cancelTouch(); 
         if(dy > 0) { 
          config.wipeDown(e); 
         } 
         else { 
          config.wipeUp(e); 
         } 
        } 
      } 
     } 

     function onTouchStart(e) 
     { 
      if (e.touches.length == 1) { 
       startX = e.touches[0].pageX; 
       startY = e.touches[0].pageY; 
       isMoving = true; 
       this.addEventListener('touchmove', onTouchMove, false); 
      } 
     } 
     if ('ontouchstart' in document.documentElement) { 
      this.addEventListener('touchstart', onTouchStart, false); 
     } 
    }); 

    return this; 
}; 

})(jQuery);