有時，我們需要在嵌套的 HTML 元素上添加相同的事件。例如，我們有兩個div，一個是父div，另一個是子div。現在，我們需要在父div和子div上添加onclick事件，并在用戶點擊父div和子div時執行不同的功能。在這種情況下，它將始終在父 div 和子 div 上執行事件。
讓我們通過下面的示例了解如何在嵌套 HTML 元素上執行相同的事件。
示例
在下面的示例中，我們創建了兩個 div。我們為外部 div 指定了“parent-div”類名稱，為內部 div 指定了“child-div”類名稱。
此外，我們還添加了 onclick 事件，在兩個 div 元素上執行不同的功能。當用戶點擊內部div時，父div中也會觸發點擊事件。
<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>
登錄后復制
我們需要使用事件來解決上述問題，比如點擊子div，調用父div的click事件.stopPropogation()方法。
語法
用戶可以按照下面的語法使用 stopPropgation() 方法來停止向父元素傳播事件。
Event.stopPropogation();
登錄后復制
示例
在下面的示例中，我們在 HTML
標記內添加了一些文本，并在執行executeP() 函數的 onclick 事件中添加了一些文本。此外，我們在
標簽內添加了一個 標簽，并在執行executeSpan() 函數的span 標簽上添加了“onclick”事件。
此外，我們還使用了 event.stoPropogation() 方法和 元素的 onclick 事件，以在用戶單擊 時停止在
標記上傳播事件。
在輸出中，用戶可以觀察到當他們單擊元素的文本時，它只執行executeSpan()函數。
<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>
登錄后復制
示例
在下面的示例中，我們使用 HTML 標記創建了三個嵌套元素的層次結構。我們在每個元素上添加了 onclick 事件。如果我們不使用event.stopPropogation()方法，它總是執行firstDivClick()函數。
為了解決這個問題，我們在調用它們時將事件作為函數的參數傳遞，并在函數內使用 stopPropogation() 方法。
用戶可以觀察到，當他們單擊“菜單”文本時，它僅執行 kebabMenuClick() 函數。當用戶單擊第二個 div 時，它僅執行 secondaryDivClick() 函數。
<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>
登錄后復制
用戶學會了對事件使用 event.stopPorpogation() 方法。基本上，它用于阻止事件傳播到父元素。這樣，當同一個事件觸發父子元素時，我們就可以為所有子元素執行不同的函數。
以上就是如何使用 JavaScript 中的內聯 onclick 屬性停止事件傳播？的詳細內容，更多請關注www.92cms.cn其它相關文章！
