HTML5:在Android上检测水平滑动和垂直滚动

时间:2014-03-16 09:20:34

标签: javascript android html touch swipe

我需要检测向右滑动并在手机上向左滑动,同时还允许向上/向下滚动。

这适用于iPhone,但不适用于Android。基本上,选择似乎是滚动或滑动。

我已尝试过jquery mobile和http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

这里http://wilsonpage.co.uk/touch-events-in-chrome-android/得出结论"为了达到预期的效果,我现在必须使用合成的JavaScript驱动滚动进行水平平移和滑动以及垂直滚动。"

是否有人提出另一种解决方案或有任何库来处理这个问题?

我尝试更改netCU代码以更改是否调用e.preventDefault(),因为这似乎是相关的。没运气。滑动不适用于以下代码。

   (function($) { 
   $.fn.touchwipe = function(settings) {
     min_move_x = 30;
     min_move_y = 20;
     var config = {
            wipeLeft: function() { },
            wipeRight: function() { }
     };

     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(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) >= min_move_x) {
                    e.preventDefault();
                    cancelTouch();
                    if(dx > 0) {
                        config.wipeLeft();
                    }
                    else {
                        config.wipeRight();
                    }
                 }
                else if(Math.abs(dy) >= min_move_y) {
                        cancelTouch();
                     }
             }
         }

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


 $("html").touchwipe({
     wipeLeft: function() { alert("left");  },
     wipeRight: function() { alert("right");  },
});

0 个答案:

没有答案