JavaScript阻止事件冒泡的方法
我們需要注意的是：事件冒泡本身的特性，會(huì)帶來(lái)的壞處，也會(huì)帶來(lái)的好處，在后續(xù)的博客我會(huì)詳細(xì)說(shuō)明。
- 所以我們?cè)谶@里將論述一下如何阻止事件冒泡。
- 比如現(xiàn)在有一個(gè)子盒子和一個(gè)父盒子，子盒子和父盒子二者都有點(diǎn)擊事件，但是此時(shí)，當(dāng)我們點(diǎn)擊子盒子時(shí)，只想讓子盒子顯示點(diǎn)擊事件。這里我們就要用到阻止事件冒泡的方法來(lái)隔斷父盒子的事件顯示。
先創(chuàng)建兩個(gè)盒子，并給他們添加點(diǎn)擊事件，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
margin: 100px auto;
width: 100px;
height:100px;
overflow: hidden;
background-color: palegreen;
}
.son{
width: 50px;
height: 50px;
margin-left: 25px;
margin-top: 25px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
son.addEventListener('click',function(){
alert('son');
},false)
father.addEventListener('click',function(){
alert('father');
},false)
</script>
</body>
</html>
當(dāng)我們點(diǎn)擊子盒子的點(diǎn)擊事件時(shí)，打印結(jié)果為：
我們應(yīng)該怎樣阻斷父盒子的點(diǎn)擊事件呢？
可以直接在子盒子內(nèi)部的點(diǎn)擊事件里面添加stopPropagation()方法，
如下所示：
son.addEventListener('click',function(e){
alert('son');
e.stopPropagation();
},false)
此時(shí)，運(yùn)行結(jié)果為：
阻斷成功。
但是需要注意的是：這個(gè)方法也有兼容性問(wèn)題，在低版本瀏覽器中（IE 6-8 ）通常是利用事件對(duì)象cancelBubble屬性來(lái)操作的。即直接在相應(yīng)的點(diǎn)擊事件里面添加：
e.cancelBubble = true;
如果我們想要解決這種兼容性問(wèn)題，就可以采用下述方法：
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
到此這篇關(guān)于基于JavaScript阻止事件冒泡的文章就介紹到這了,更多相關(guān)JavaScript阻止事件冒泡內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序 template模板詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
Electron?網(wǎng)絡(luò)攔截實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Electron?網(wǎng)絡(luò)攔截實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JS算法題解數(shù)組刪除重復(fù)項(xiàng)方法示例
這篇文章主要為大家介紹了JS算法題解數(shù)組刪除重復(fù)項(xiàng)方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Web項(xiàng)目如何配置Eslint過(guò)程詳解
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
javascript中的箭頭函數(shù)基礎(chǔ)語(yǔ)法及使用場(chǎng)景示例
這篇文章主要為大家介紹了?javascript中的箭頭函數(shù)基礎(chǔ)語(yǔ)法及使用場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
smartbanner.js實(shí)現(xiàn)可定制智能應(yīng)用橫幅使用示例
這篇文章主要為大家介紹了smartbanner.js實(shí)現(xiàn)可定制智能應(yīng)用橫幅使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序 數(shù)據(jù)交互與渲染實(shí)例詳解
這篇文章主要介紹了微信小程序 數(shù)據(jù)交互與渲染實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序中hidden不生效原因的解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript專題之underscore防抖實(shí)例學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實(shí)例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了JS算法題解搜索插入位置方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07