移动端滑动事件
安卓webview下使用zepto的swipe时遇到的问题
(使用zepto的swipe时必须引用touch.js,不然很多移动端浏览器swipe会失灵。)
我想要用swipeLeft/swipeRight监听向左向右滑动事件,如果只是单纯为元素增加swipeLeft/swipeRight事件的话在webview下是不生效的,如果这个页面不需要上下滑动的话,完全可以用
$('body').bind("touchmove", function(e) { e.preventDefault();});
解决。即取消body的touchmove默认行为即可。但这种做法太绝对太暴力了,如果页面需要上下滑动的话,那就会出问题。这里有两种情况,第一种是页面内的某个元素需要上下滑动,另一种是页面需要上下滑动。第一种情况,只是页面内某个元素需要上下滑动的话,可为这个元素监听touchmove事件,阻止冒泡。比如:
$(id).bind("touchmove", function(e) { e.stopPropagation()});
那如果是整个页面需要上下滑动,就全部用touch(touchStart/touchmove/touchEnd)模拟实现(在安卓webview下我模拟的swipe手势并不会触发touchend事件,我想这应该也是zepto自己封装的swipe事件失效的原因,思路是在用户刚开始滑动的时候,判断用户是想上下滑动还是左右滑动,上下滑动的话不做处理,左右滑动的话,对touchmove事件进行preventDefault()操作。)
jquery不支持swipe事件,需应用jquery mobile
原生javascript touch事件,touchstart,touchmove,touchend
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:
1. touchstart :手指放在一个DOM元素上。
2. touchmove :手指拖曳一个DOM元素。
3. touchend :手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表:
1. touches :当前位于屏幕上的所有手指的一个列表。
2. targetTouches :位于当前DOM元素上的手指的一个列表。
3. changedTouches :涉及当前事件的手指的一个列表。
例如,在一个touchend事件中,这就会是移开的手指。
这些列表由包含了触摸信息的对象组成:
1. identifier :一个数值,唯一标识触摸会话(touch session)中的当前手指。
2. target :DOM元素,是动作所针对的目标。
3. 客户/页面/屏幕坐标 :动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle :画出大约相当于手指形状的椭圆形。
例如:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);