我们在做移动端端的拖动效果时(touchstart,touchmove,touchend),有的时候会遇到一个如下错误:

意思就是不能在被动事件内使用preventDefault()方法。我们先看看代码里咋写的:

很正常啊,哪里来的被动事件?我们知道,preventDefault()是阻止默认事件的方法,一般来说,事件传递过程为:用户操作-》方法捕捉-》浏览器默认行为。例如标签a,我们绑定了一个click事件,那么我们点击后,会执行click方法,然后会进行跳转。但是我们可以在click方法里写preventDefault()来阻止跳转动作。

但是touch事件不太一样,因为你在移动的时候,浏览器也要利用touch事件进行移动(例如页面滚动等),如果每次都去判断用户是否调用preventDefault()方法就很麻烦了,所以touch事件默认先执行浏览器行为,用户操作-》浏览器默认行为-》方法捕捉。因此这个你的preventDefault()无法阻止默认行为。

因此,touch事件在默认的情况下passive为true,就是被动的意思,如果想要先执行绑定操作,就要配置passive为false。

当然,还有一个css属性可以控制:touch-action:none,这样的话,浏览器就不会执行默认的touch动作。不过注意,这个属性千万不要乱用,否则可能导致无法正常滚动。

注意,touch事件中只有touchstart和touchmove才具有此特性,touchend等其他touch属性是没有的。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字