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的click事件,使用stopPropogation()方法来阻止事件冒泡。
语法
用户可以按照以下语法使用stopPropgation()方法来阻止事件传播到父元素。
Event.stopPropogation();
示例
在下面的示例中,我们在HTML的<p>
标签中添加了一些文本,并且在点击事件中执行了executeP()函数。此外,我们在<p>
标签中添加了一个<span>
标签,并在span标签上添加了’onclick’事件,执行executeSpan()函数。
此外,我们使用了event.stoPropogation()方法,将其与<span>
元素的onclick事件结合使用,当用户点击<span>
元素时,阻止事件在<p>
标签上的传播。
在输出中,用户可以观察到,当他们点击元素的文本时,只会执行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()方法处理事件。基本上,它用于阻止事件传播到父元素。通过这种方式,当相同的事件触发父元素和子元素时,我们可以为所有子元素执行不同的函数。