移动端滑动事件

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

posted @ 2015-10-19 15:55  名字好难起  阅读(999)  评论(0编辑  收藏  举报