本文主要介绍如何基于JavaScript防止事件冒泡。事件冒泡一开始是由最具体的元素接收，然后一步步扩散到DOM的顶层节点。更多详情，请有需要的朋友参考以下文章的具体内容。希望对你有帮助。

我们需要注意的是：事件冒泡本身的特点，会带来的坏处，会带来的好处，会在后续博客中详细讲解。

所以这里我们就讨论一下如何防止事件冒泡。比如有一个子框和一个父框，两个框都有click事件，但是这个时候我们点击子框，只希望子框显示click事件。这里，我们将使用防止事件冒泡的方法来切断父框的事件显示。

先创建两个盒子，并给他们添加点击事件，如下所示：

！文档类型html

html lang='en '

头

meta charset='UTF-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '

meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '

标题文档/标题

风格。父亲{

边距：100px自动；

宽度：100px

高度：100px

溢出：隐藏；

背景色：浅绿色；

}。儿子

宽度：50px

高度：50px

左边距：25px

边距-顶部：25px

背景色：浅青绿色；

}

/风格

/头

身体

div class='父亲'

div class='son'/div

/div

脚本

var father=document . query selector('。父亲’)；

var son=document.querySelector('。子’)；

son.addEventListener('click '，function(){

alert('儿子')；

}，假)

father.addEventListener('click '，function(){

alert('父亲')；

}，假)

/脚本

/body

/html

当我们点击子盒子的点击事件时，打印结果为：

我们应该怎样阻断父盒子的点击事件呢？

您可以在子框内的click事件中直接添加stopPropagation()方法，

如下所示：

son.addEventListener('click '，函数(e){

alert('儿子')；

e .停止传播()；

}，假)

此时，运行结果为：

阻挡成功。

但是需要注意的是:这个方法也有兼容性问题。在较低版本的浏览器(IE 6-8)中，通常使用事件对象的cancelBubble属性进行操作。即直接添加到相应的click事件中：

e.cancelBubble=true

如果我们想要解决这种兼容性问题，就可以采用下述方法：

如果(例如停止传播){

e .停止传播()；

}否则{

window . event . cancel bubble=true；

}

这就是这篇关于基于JavaScript防止事件冒泡的文章。有关防止JavaScript事件冒泡的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。