所属分类：web前端开发
有时，我们需要在嵌套的 HTML 元素上添加相同的事件。例如，我们有两个div，一个是父div，另一个是子div。现在，我们需要在父div和子div上添加onclick事件，并在用户点击父div和子div时执行不同的功能。在这种情况下，它将始终在父 div 和子 div 上执行事件。
让我们通过下面的示例了解如何在嵌套 HTML 元素上执行相同的事件。
在下面的示例中，我们创建了两个 div。我们为外部 div 指定了“parent-div”类名称，为内部 div 指定了“child-div”类名称。
此外，我们还添加了 onclick 事件，在两个 div 元素上执行不同的功能。当用户点击内部div时，父div中也会触发点击事件。
微博登录
QQ登录<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 标记创建了三个嵌套元素的层次结构。我们在每个元素上添加了 onclick 事件。如果我们不使用event.stopPropogation()方法，它总是执行firstDivClick()函数。 为了解决这个问题，我们在调用它们时将事件作为函数的参数传递，并在函数内使用 stopPropogation() 方法。 用户可以观察到，当他们单击“菜单”文本时，它仅执行 kebabMenuClick() 函数。当用户单击第二个 div 时，它仅执行 secondaryDivClick() 函数。 用户学会了对事件使用 event.stopPorpogation() 方法。基本上，它用于阻止事件传播到父元素。这样，当同一个事件触发父子元素时，我们就可以为所有子元素执行不同的函数。<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>
<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>
