轩枫阁

首页 / 授人以渔 / Javascript / javascript阻止事件冒泡

javascript阻止事件冒泡

什么是冒泡

在页面上有多个事件,也可以多个元素响应同一个事件。假设网页上有2个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。

例如:

若没有做事件冒泡处理,当只单击span元素时,也会触发外部<div>元素和<body>元素上绑定的click事件,这是由事件冒泡引起的。

元素的click事件会按照一下顺序“冒泡”:1.<span>    2.<div>  3.<body>

之所以称为冒泡,是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

如何阻止

事件冒泡可能会引起预料之外的效果,所有有必要进行阻止。

先介绍几个与事件有关的方法

1、cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

3、 preventDefault(HTML DOM Event 对象方法):通知浏览器不要执行与事件关联的默认动作。

4、return false: 同时对事件对象阻止冒泡和默认行为(这是在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式)

当然,从程序中可以看到存在兼容性问题。IE低版本支持cancelBubble,不支持stopPrapagation。不过cancelBubble不是w3c标准,但chrome也支持事件的cancelBubble。

所以可以整理成一个事件冒泡函数

 

本文标题:javascript阻止事件冒泡 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
372/456
374/456

相关文章

文章评论

  • 羊眼圈…

    苍天有眼啊,让我在有生之年得以观得如此精彩绝伦的帖子。…

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]