如何使用 JavaScript 中的内联 onclick 属性停止事件传播?
有时，我们需要在嵌套的 HTML 元素上添加相同的事件。例如，我们有两个 div，一个是父 div，另一个是子 div。现在，我们需要在父 div 和子 div 上添加 onclick 事件，并在用户单击父 div 和子 div 时执行不同的功能。在这种情况下，它将始终在父 div 和子 div 上执行事件。
让我们通过以下示例了解如何在嵌套的 HTML 元素上执行相同的事件。
示例
在下面的示例中，我们创建了两个 div。我们为外部 div 指定了"parent-div"类名，为内部 div 指定了"child-div"类名。
此外，我们还添加了在两个 div 元素上执行不同功能的 onclick 事件。当用户点击内部 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() 方法的 click 事件。
语法
用户可以按照以下语法使用 stopPropgation() 方法停止将事件传播到父元素。
Event.stopPropogation();
示例
在下面的示例中，我们在 HTML <p> 标签内添加了一些文本，并执行了 executeP() 函数的 onclick 事件。此外，我们在 <p> 标签内添加了 <span> 标签，并在执行 executeSpan() 函数的 span 标签上添加了"onclick"事件。
此外，我们还将 event.stoPropogation() 方法与 <span> 元素的 onclick 事件结合使用，以便在用户点击 <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() 方法。
用户可以观察到，当他们点击"菜单"文本时，它只执行 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() 方法。基本上，它用于阻止事件传播到父元素。这样，当同一事件触发父元素和子元素时，我们可以对所有子元素执行不同的函数。
