码迷,mamicode.com
首页 > 移动开发 > 详细

移动端touch事件影响界面click/超链接事件无法点击

时间:2017-11-09 22:33:05      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:半径   pre   art   event   数值   包括   滑动   列表   end   

触摸事件:

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:

1.touchstart:手指放在一个DOM元素上。

2.touchmove:手指拖曳一个DOM元素。

3.touchend:手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表:

1.touches:当前位于屏幕上的所有手指的一个列表。

2.targetTouches:位于当前DOM元素上的手指的一个列表。

3.changedTouches:涉及当前事件的手指的一个列表。

例如,在一个touchend事件中,这就会是移开的手指。

这些列表由包含了触摸信息的对象组成:

1.identifier:一个数值,唯一标识触摸会话(touchsession)中的当前手指。

2.target:DOM元素,是动作所针对的目标。

3.客户/页面/屏幕坐标:动作在屏幕上发生的位置。

4.半径坐标和rotationAngle:画出大约相当于手指形状的椭圆形。

 

这两天自己在做一个移动端APP,要用到滑动触发动画的效果,做完之后发现滑动和动画可以顺利完成,但是页面其他的超链接和click点击事件却无法点击了,用到的库是zepto和vue。

之后排查发现问题可能是出在event事件中,就把touchstart和touchend事件的默认行为取消了(e.preventDefault()),取消后发现可以点击了,但是滑动效果大打折扣了,从右边滑动回左边的时候效果非常差,然后就上百度查,发现有一篇文章

https://www.cnblogs.com/lvmingyin/p/5372678.html

之后把阻止默认行为添加到touchmove 就OK了。

相关的文章地址: http://caibaojian.com/mobile-touch-event.html

移动端touch事件影响界面click/超链接事件无法点击

标签:半径   pre   art   event   数值   包括   滑动   列表   end   

原文地址:http://www.cnblogs.com/LeBron-James/p/7811405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!