Jquery 事件冒泡的介绍以及如何阻止事件冒泡

来源：互联网发布：foobar2000音质优化版编辑：程序博客网时间：2024/05/20 00:51

什么是JS事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

例1：

点击一个链接，触发绑定在链接元素上的 click 事件，进而触发绑定到这个元素的click事件的函数。

$('a').bind('click', function() { alert("That tickles!") });

    所以一次点击会触发一个alert。

    然后，这个 click 事件会从DOM树向上传递，传播到父元素，然后传递给每一个祖先元素。

  在DOM树中， document 是根节点。

Jquery事件冒泡演示

了解了jquery事件冒泡现在来了解如何阻止jquery事件冒泡现在通过一个例子来演示：

例2：

<body>

</div>

</body>

上面这个页面分为三层：

最外层div：divOne；

中间层div：divTwo；

最里层a标签：aThree；

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。

运行页面后执行结果如下图：

先触发了响应的三个事件然后再触发了"a"标签的行为

通过上例我们不仅了解冒泡事件，并且知道了事件与控件行为的触发顺序：

点击的元素-》父元素-》触发点击元素的响应行为

如何来阻止?

下面来介绍如何阻止事件冒泡

一共有两种阻止的方式分别为：

1.event.stopPropagation();

下面通过案例来演示

<body>

</div>

</body>

$('#aThree').click(function(event){

event.stopPropagation();

});

</script>

点击之后的结果为：

先触发了该元素的事件之后触发了该元素的默认行为

所以可以得出

event.stopPropagation();

可以阻止事件冒泡，但不能阻止触发事件的控件的行为

2.function(event){return false;}

下面通过案例演示：

<body>

</div>

</body>

$('#aThree').click(function(event){

return false;

});

</script>

执行后的结果如下：

通过此结果可以得出

return false;

不仅可以阻止事件冒泡还可以阻止触发事件的元素的默认行为

更多...

而且通过这点我们可以进行进一步分析，一些元素的行为的触发也是通过事件的触发来执行的

function(event){

return false;

}

的返回值来执行的如果return false 则触发事件将不进行传递，并且分析其优先级为：

触发事件的元素通过js绑定事件为最高优先级 > 触发事件的元素默认行为(如:<a href="https://www.baidu.com"></a>)优先级 > 父（包括父父、父父父）元素优先级 > document优先级

0 0