有時，我們需要在巢狀的 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 屬性停止事件傳播？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
