数据结构
网络
关系数据库管理系统
操作系统
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+ 次查看
