有時(shí)，我們需要在嵌套的 HTML 元素上添加相同的事件。例如，我們有兩個(gè)div，一個(gè)是父div，另一個(gè)是子div。現(xiàn)在，我們需要在父div和子div上添加onclick事件，并在用戶點(diǎn)擊父div和子div時(shí)執(zhí)行不同的功能。在這種情況下，它將始終在父 div 和子 div 上執(zhí)行事件。
讓我們通過下面的示例了解如何在嵌套 HTML 元素上執(zhí)行相同的事件。
示例
在下面的示例中，我們創(chuàng)建了兩個(gè) div。我們?yōu)橥獠?div 指定了“parent-div”類名稱，為內(nèi)部 div 指定了“child-div”類名稱。
此外，我們還添加了 onclick 事件，在兩個(gè) div 元素上執(zhí)行不同的功能。當(dāng)用戶點(diǎn)擊內(nèi)部div時(shí)，父div中也會(huì)觸發(fā)點(diǎn)擊事件。
<html>
<head>
<style>
.parent-div {
width: 300px;
height: 150px;
margin: 50px;
padding: 10px;
background-color: lightblue;
}
.child-div {
width: 100px;
height: 70px;
margin: 30px;
padding: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h3>Adding the same events <i> to nested HTML elements </i> in JavaScript</h3>
<p>Click on the below parent & child DIVs to see the result</p>
<div class = "parent-div" onclick = "executeParent()"> Parent DIV
<div class = "child-div" onclick = "executeChild()"> Child DIV </div>
</div>
<div id="content"> </div>
<script>
let content = document.getElementById("content");
function executeParent() {
content.innerHTML += "Parent div clicked <br>";
}
function executeChild() {
content.innerHTML += "Child div clicked <br>";
}
</script>
</body>
</html>
登錄后復(fù)制
我們需要使用事件來解決上述問題，比如點(diǎn)擊子div，調(diào)用父div的click事件.stopPropogation()方法。
語法
用戶可以按照下面的語法使用 stopPropgation() 方法來停止向父元素傳播事件。
Event.stopPropogation();
登錄后復(fù)制
示例
在下面的示例中，我們?cè)?HTML
標(biāo)記內(nèi)添加了一些文本，并在執(zhí)行executeP() 函數(shù)的 onclick 事件中添加了一些文本。此外，我們?cè)?
標(biāo)簽內(nèi)添加了一個(gè) 標(biāo)簽，并在執(zhí)行executeSpan() 函數(shù)的span 標(biāo)簽上添加了“onclick”事件。
此外，我們還使用了 event.stoPropogation() 方法和 元素的 onclick 事件，以在用戶單擊 時(shí)停止在
標(biāo)記上傳播事件。
在輸出中，用戶可以觀察到當(dāng)他們單擊元素的文本時(shí)，它只執(zhí)行executeSpan()函數(shù)。
<html>
<body>
<h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
<p style = "cursor: pointer;" onclick="executeP()"> Hello users! How are you? <span Onclick = "event.stopPropagation(); executeSpan();"> Child Span </span> </p>
<div id = "content"> </div>
<script>
let content = document.getElementById("content");
function executeP() {
content.innerHTML += "Clicked on the p element. <br>";
}
function executeSpan() {
content.innerHTML += "Clicked on the Span element! <br>";
}
</script>
</body>
</html>
登錄后復(fù)制
示例
在下面的示例中，我們使用 HTML 標(biāo)記創(chuàng)建了三個(gè)嵌套元素的層次結(jié)構(gòu)。我們?cè)诿總€(gè)元素上添加了 onclick 事件。如果我們不使用event.stopPropogation()方法，它總是執(zhí)行firstDivClick()函數(shù)。
為了解決這個(gè)問題，我們?cè)谡{(diào)用它們時(shí)將事件作為函數(shù)的參數(shù)傳遞，并在函數(shù)內(nèi)使用 stopPropogation() 方法。
用戶可以觀察到，當(dāng)他們單擊“菜單”文本時(shí)，它僅執(zhí)行 kebabMenuClick() 函數(shù)。當(dāng)用戶單擊第二個(gè) div 時(shí)，它僅執(zhí)行 secondaryDivClick() 函數(shù)。
<html>
<head>
<style>
.card-1 {
width: 300px;
height: 200px;
background-color: red;
cursor: pointer;
}
.card-2 {
width: 200px;
height: 150px;
background-color: blue;
cursor: pointer;
}
.kebab-menu {
font-size: 1.2rem;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
<div class = "card-1" onclick = "firstDivClick(event)">
<div class = "card-2" onclick = "secondDivClick(event)">
<div class = "kebab-menu" onclick = "kebabMenuClick(event)"> Menu </div>
</div>
</div>
<div id = "content"> </div>
<script>
let content = document.getElementById("content");
function firstDivClick(event) {
content.innerHTML += "first div clicked <br>";
}
function secondDivClick(event) {
event.stopPropagation();
content.innerHTML += "second div clicked <br>";
}
function kebabMenuClick(event) {
event.stopPropagation();
content.innerHTML += "kebab menu clicked <br>";
}
</script>
</body>
</html>
登錄后復(fù)制
用戶學(xué)會(huì)了對(duì)事件使用 event.stopPorpogation() 方法。基本上，它用于阻止事件傳播到父元素。這樣，當(dāng)同一個(gè)事件觸發(fā)父子元素時(shí)，我們就可以為所有子元素執(zhí)行不同的函數(shù)。
以上就是如何使用 JavaScript 中的內(nèi)聯(lián) onclick 屬性停止事件傳播？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
