溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了JavaScript阻止事件冒泡的方法是什么，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
我們需要注意的是：事件冒泡本身的特性，會帶來的壞處，也會帶來的好處，在后續(xù)的博客我會詳細(xì)說明。
所以我們在這里將論述一下如何阻止事件冒泡。
比如現(xiàn)在有一個(gè)子盒子和一個(gè)父盒子，子盒子和父盒子二者都有點(diǎn)擊事件，但是此時(shí)，當(dāng)我們點(diǎn)擊子盒子時(shí)，只想讓子盒子顯示點(diǎn)擊事件。這里我們就要用到阻止事件冒泡的方法來隔斷父盒子的事件顯示。
先創(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è)方法也有兼容性問題，在低版本瀏覽器中（IE 6-8 ）通常是利用事件對象cancelBubble屬性來操作的。即直接在相應(yīng)的點(diǎn)擊事件里面添加：
e.cancelBubble = true;
如果我們想要解決這種兼容性問題，就可以采用下述方法：
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}上述內(nèi)容就是JavaScript阻止事件冒泡的方法是什么，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼