移动端阻止默认事件

2018-10-13  本文已影响0人  海因斯坦

在移动端进行开发时,移动端存在一些默认事件,比如长按选中文字,或者下拉时刷新。这些功能我们通常都是自己去实现,为了避免自己实现的功能受到默认事件的影响,我们通常需要阻止掉这些默认事件。

阻止掉所有的默认事件:

在移动端,不仅元素身上绑定了默认事件,在document身上也绑定了默认事件,因此我们可以利用冒泡事件来阻止默认事件,也就是说哪怕你元素本身没有阻止默认事件,你触发了默认事件,但是通过冒泡父元素身上取消了默认事件,那么最终的结果默认事件也会被取消掉,因为根据事件流,元素身上的事件在目标阶段触发,冒泡事件在冒泡阶段触发,冒泡阶段在目标阶段之后,最终结果取决于后执行的事件。我们先验证这种理念:

利用这个思想我们就可以通过在document身上取消默认事件,从而阻止所有的默认事件:

是否所有的默认事件都可以被阻止掉了

事实上不是所有的默认事件都可以通过preventDefault阻止掉的,只有event对象上的cancelable属性为true的时候才可以成功阻止默认事件。

如果我们不是希望所有的默认事件被阻止掉,让某个元素具有默认事件:

有时候,我们希望某个特定的元素能够具有默认事件,比如在获取验证码时,验证码通常用户希望是能够复制的,因此会触发长按复制的默认事件,这个事件我们希望在这个元素身上不被阻止掉,那么应该如何实现了?如上面所述,我们是通过冒泡来借助父元素阻止掉默认事件,那么如果我们切断冒泡,那么父元素身上的阻止默认事件就无法被触发,元素本身的默认事件就无法被阻止掉了。

阻止所有默认事件带来的问题:

虽然我们阻止掉了所有的默认事件,但是这种方法也带来了新的问题,那就是在阻止默认事件以后,所有的滚动条失效,因此我们在移动端通常需要自定义滚动条,还好整个页面通常只有最外层才具有一个滚动条

总结:

阻止事件的默认行为,有两种方式:

1、在元素本身阻止掉默认行为

2、在元素的父元素身上阻止默认行为。这里通过在document身上阻止掉了移动端所有的默认事件。

取消阻止默认事件的行为:

通过给特定元素设置取消冒泡,这样的话父元素身上的事件就无法通过冒泡触发,也就无法阻止默认事件了

移动端进行开发时一上来就需要阻止所有的默认事件

移动端滚动条需要自定义来实现

上一篇下一篇

猜你喜欢

热点阅读