解決Android下元素滑動問題

標籤：target   com   web   --   and   頁面   distance   機制   cal   

 

移動端左右、上下滑動：
當頁面中既需要頁面滑動操作，又需要上下或左右滑動頁面上的某個元素時，直接使用zepto中提供的swipe事件是不能直接達到目的的，原因如下：
（1）在Android低端機上touchEnd會不被觸發。
（2）zepto中的swipe 事件通過 事件冒泡機制實現事件監聽
在document上統一監聽touchstart、 touchmove、 touchend， 然後判斷是上下滑動還是左右滑動。 再判斷document的touch事件是由哪個元素上的touch事件冒泡上來的， 再觸發該元素上的滑動事件。
直接在某個元素上綁定swipe事件，會冒泡至body上，如果是上下滑動會觸發頁面滾動，導致在滑動元素的時候頁面也在滾動。
滑動事件觸發過程：
（1）IOS 上 當觸發 "swipe"時， 依次產生如下事件： touchstart - > touchmove * 多次 - > touchend - > scroll
（2）Android4.x上touchend不觸發-- > touchmove時, 阻止預設事件， touchend才會被觸發
touchstart - > touchmove - > touchcancel - > scroll * 多次
並且在Android低版本上還會出現單擊一下，會有位移差的現象。

 

所以，通過下面指令碼重寫swipe事件，解決上面的問題。

/** * 滑動事件   Android 4.0 will not fire touchend event */define(function(require,exports,module){     function SwipeEvent(selector){        this.selector = selector;        this.swipeLeftCallback = function(){};        this.swipeRightCallback = function(){};        this.swipeUpCallback = function(){};        this.swipeDownCallback = function(){};        this._initSwipe(selector);    }    SwipeEvent.prototype.bind = function(evtName,callback){        switch(evtName){            case "swipeLeft":            this.swipeLeftCallback = callback;            break;            case "swipeRight":            this.swipeRightCallback = callback;            break;            case "swipeUp":            this.swipeUpCallback = callback;            break;            case "swipeDown":            this.swipeDownCallback = callback;            break;        }    };    SwipeEvent.prototype._initSwipe = function(selector){        var self = this;        var startX, startY;        var endX, endY;        var distanceX, distanceY;            $(selector).on(‘touchstart‘, function(event) {                startX = event.targetTouches[0].clientX;  //位於當前DOM元素上手指的列表。                startY = event.targetTouches[0].clientY;            }).on("touchmove",function(event){                endX = event.changedTouches[0].clientX;                endY = event.changedTouches[0].clientY;   //涉及當前事件手指的列表。                distanceX = Math.abs(startX - endX);                distanceY = Math.abs(startY - endY);                if(distanceX > 1 || distanceY > 1){  //判斷是左右滑動或上下滑動，阻止預設事件  使android4 touchend生效                    event.preventDefault();                }                event.stopPropagation();            }).on(‘touchend‘, function(event) {                endX = event.changedTouches[0].clientX;                endY = event.changedTouches[0].clientY;                distanceX = Math.abs(startX - endX);                distanceY = Math.abs(startY - endY);                if(distanceX > 10 || distanceY > 10){  //安卓4.X裡，單擊一次也會產生位移差                    if (distanceX >= distanceY) {  //左右滑動                        if(startX - endX > 0){                            self.swipeLeftCallback(event);                        }else if(startX - endX < 0){                            self.swipeRightCallback(event);                        }                    }else{                        if(startY - endY > 0){                            self.swipeUpCallback(event);                        }else if(startY - endY < 0){                            self.swipeDownCallback(event);                        }                    }                }            });    };    module.exports =  SwipeEvent;});

 參考：http://www.cnblogs.com/ytu2010dt/p/5767491.html

http://www.myexception.cn/web/1874295.html

解決Android下元素滑動問題