JS事件冒泡的理解和阻止事件冒泡

 

一、什么是时间冒泡

事件冒泡是微软提出的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

理解了这个概念,所以在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document。所以如果p和div元素都具备点击事件,那么两个事件都会执行。这使得我们需要阻止一个事件的执行。

二、阻止冒泡

js冒泡和捕获是事件的两种行为,所以可以使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

所以阻止捕获冒泡事件可以使用:

window.event? window.event.cancelBubble = true : e.stopPropagation();

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。