你的位置:主页 > 汉语言文学 >

万丈高楼平地起——每天进步一点点,就是收获

2020-06-10 | 人围观

  很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下。

  什么是事件冒泡这里就不再赘述了,网上的文章一大把,这里就简述一下如何阻止事件冒泡,阻止事件冒泡在使用浏览器原生API的情况下,是需要分情况考虑的,毕竟有个个性的浏览器IE,这里分为IE实现和W3C标准实现。

  在W3C标准实现中,我们阻止事件冒泡可以很容易使用标准API

  基本语法:

  IE实现下(这里主要指IE低版本IE9以下版本,因为IE9也实现了W3C标准)

  基本语法:

  当然IE标准并不是只有IE支持,其实很多浏览器都实现了cancelBubble支持,但是后来虽然浏览器没有取消对cancelBubble属性的支持,设置了之后也会无效,所以建议的兼容语法是:

  当然说到阻止事件冒泡这个问题,也要简单提一下 event.stopPropagation 和event.stopImmediatePropagation的异同点:

  上面代码需要注意的一点是,IE下e不存在,从window中获取,简单做了兼容处理。可以尝试使用return false

  在开始之前,首先需要了解什么是浏览器的默认行为,我这里简单举几个例子:

  还有其他的很多,这里就不一一列举了

  同样的对于阻止浏览器默认行为的实现也分为W3C标准实现和IE实现(这里也只是指IE9以下的实现)

  在W3C标准实现中,其基本语法如下:

  在IE实现中,其基本语法如下:

  所以其兼容版本伪代码如下

  这里简单那checkbox做一个小的demo:

  有兴趣的其它场景都可以写个小demo 玩玩。

  同样W3C标准实现中,我们可以通过event.defaultPrevented 来确定event.preventDefault方法是否被调用,基本模式如下:

  当然不是所有的事件都可以被cancel,浏览器也提供了cancelable属性来判断事件是否可以被取消,如果cancelable为false,那么便无法阻止浏览器的默认行为,如果在一个不可撤销的事件上调用preventDefault,会抛出错误,所以建议在调用之前判断事件是否可被取消.

  下面是一个来自于mdn的例子,有兴趣的可以直接看原文

  https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable

  浏览器厂商提议滚轮事件只有第一次可被取消

  阻止默认冒泡和阻止浏览器默认行为需要关注的是兼容性问题,其它内容大家只需要关注mdn,已经很详细的列出了兼容问题,对前端&node有兴趣的欢迎微信交流,如果你能看到弹框弹出微信二维码的话。

  每个API的浏览器兼容情况如下:

标签:
Top