資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中使用內聯 onclick 屬性阻止事件傳播？
有時，我們需要在巢狀的 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 的點選事件。stopPropogation() 方法。
語法
使用者可以按照以下語法使用 stopPropgation() 方法來阻止事件傳播到父元素。
Event.stopPropogation();
示例
在下面的示例中，我們在 HTML <p> 標籤內添加了一些文字和執行 executeP() 函式的 onclick 事件。此外，我們在 <p> 標籤內添加了一個 <span> 標籤，並在 span 標籤上添加了執行 executeSpan() 函式的“onclick”事件。
此外，我們在 <span> 元素的 onclick 事件中使用了 event.stoPropogation() 方法，以在使用者點選 <span> 時阻止事件傳播到 <p> 標籤。
在輸出中，使用者可以觀察到，當他們點選 <span> 元素的文字時，它只執行 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 <div> 標籤建立了三個巢狀元素的層次結構。我們在每個元素上添加了 onclick 事件。如果我們不使用 event.stopPropogation() 方法，它將始終執行 firstDivClick() 函式。
為了解決這個問題，我們在呼叫函式時將事件作為引數傳遞，並在函式內部使用 stopPropogation() 方法。
使用者可以觀察到，當他們點選“menu”文字時，它只執行 kebabMenuClick() 函式。當用戶點選第二個 div 時，它只執行 secondDivClick() 函式。
<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() 方法與事件一起使用。基本上，它用於阻止事件傳播到父元素。透過這種方式，當相同的事件觸發父元素和子元素時，我們可以為所有子元素執行不同的函式。
2K+ 次檢視
