移動端左右、上下滑動:
當頁面中既須要頁面滑動操做,又須要上下或左右滑動頁面上的某個元素時,直接使用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低版本上還會出現單擊一下,會有位移差的現象。html
因此,經過下面腳本重寫swipe事件,解決上面的問題。android
/** * 滑動事件 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; });