有时，我们需要在嵌套的 HTML 元素上添加相同的事件。例如，我们有两个div，一个是父div，另一个是子div。现在，我们需要在父div和子div上添加onclick事件，并在用户点击父div和子div时执行不同的功能。在这种情况下，它将始终在父 div 和子 div 上执行事件。
让我们通过下面的示例了解如何在嵌套 HTML 元素上执行相同的事件。
示例
在下面的示例中，我们创建了两个 div。我们为外部 div 指定了“parent-div”类名称，为内部 div 指定了“child-div”类名称。
此外，我们还添加了 onclick 事件，在两个 div 元素上执行不同的功能。当用户点击内部div时，父div中也会触发点击事件。
立即学习“Java免费学习笔记（深入）”；
.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; } Adding the same events to nested HTML elements in JavaScript
Click on the below parent & child DIVs to see the result
Parent DIV Child DIV let content = document.getElementById("content"); function executeParent() { content.innerHTML += "Parent div clicked
"; } function executeChild() { content.innerHTML += "Child div clicked
"; }
我们需要使用事件来解决上述问题，比如点击子div，调用父div的click事件.stopPropogation()方法。
语法
用户可以按照下面的语法使用 stopPropgation() 方法来停止向父元素传播事件。
Event.stopPropogation();
示例
在下面的示例中，我们在 HTML
标记内添加了一些文本，并在执行executeP() 函数的 onclick 事件中添加了一些文本。此外，我们在
播记
播客shownotes生成器 | 为播客创作者而生
43 查看详情
标签内添加了一个 标签，并在执行executeSpan() 函数的span 标签上添加了“onclick”事件。
此外，我们还使用了 event.stoPropogation() 方法和 元素的 onclick 事件，以在用户单击 时停止在
标记上传播事件。
在输出中，用户可以观察到当他们单击元素的文本时，它只执行executeSpan()函数。
Adding the same events to nested HTML elements and using the event.stopPropogation() method in JavaScript
Hello users! How are you? Child Span
let content = document.getElementById("content"); function executeP() { content.innerHTML += "Clicked on the p element.
"; } function executeSpan() { content.innerHTML += "Clicked on the Span element!
"; }
示例
在下面的示例中，我们使用 HTML 标记创建了三个嵌套元素的层次结构。我们在每个元素上添加了 onclick 事件。如果我们不使用event.stopPropogation()方法，它总是执行firstDivClick()函数。
为了解决这个问题，我们在调用它们时将事件作为函数的参数传递，并在函数内使用 stopPropogation() 方法。
用户可以观察到，当他们单击“菜单”文本时，它仅执行 kebabMenuClick() 函数。当用户单击第二个 div 时，它仅执行 secondaryDivClick() 函数。
.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; } Adding the same events to nested HTML elements and using the event.stopPropogation() method in JavaScript
let content = document.getElementById("content"); function firstDivClick(event) { content.innerHTML += "first div clicked
"; } function secondDivClick(event) { event.stopPropagation(); content.innerHTML += "second div clicked
"; } function kebabMenuClick(event) { event.stopPropagation(); content.innerHTML += "kebab menu clicked
"; }
用户学会了对事件使用 event.stopPorpogation() 方法。基本上，它用于阻止事件传播到父元素。这样，当同一个事件触发父子元素时，我们就可以为所有子元素执行不同的函数。
以上就是如何使用 JavaScript 中的内联 onclick 属性停止事件传播？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/530419.html
微信扫一扫 
支付宝扫一扫 
