内部div防止父div中的事件触发
[英]Inner div prevents event triggering in parent div
问题描述
考虑以下HTML代码：
<section id="container">
<div class="box"><div>inner div</div></div>
<div class="box"></div>
<div class="box"></div>
</section>
和JS代码：
var section = document.getElementById("container");
section.addEventListener("click", function(event) {
if (event.target.className === "box") {
...
}
});
如果单击文本inner div ，则不会触发该事件。 为什么？ 我该如何改变？
5 个解决方案
解决方案1
0 2016-06-10 11:24:04
如果单击文本内部div，则不会触发该事件。 为什么？
该事件设置为<div class="box">元素，并且<div>inner div</div>位于其顶部。 当您单击它时，事件只能触发到最顶部的元素，而不能触发其下面的元素。
要使其工作，请设置pointer-events: none; 在内部div上：
<div style="pointer-events:none;">inner div</div>
解决方案2
0 2016-06-10 11:27:34
至于为什么它没有被触发； 触发了一个事件，但是event.target.className不是“ box”，因为event.target不是外部div，而是围绕文本的内部div。
解决方案3
0 2016-06-10 11:38:53
您的代码很好。 发生问题是因为您单击的是不带box类的div（它位于div.box的div）。 您可以通过单击“内部div 2”文本来看到它：
var section = document.getElementById("container"); section.addEventListener("click", function(event) { if (event.target.className == "box") { alert('box clicked'); } });
<section id="container"> <div class="box"><div>inner div 1</div></div> <div class="box">inner div 2</div> <div class="box"></div> </section>
解决方案4
0 2016-06-10 11:39:57
内部div文本不包含类“ box”，请尝试以下代码：
<html>
<head>
</head>
<body>
<section id="container">
<div class="box"><div class="box">inner div</div></div>
<div class="box"></div>
<div class="box"></div>
</section>
<script>
var section = document.getElementById("container");
section.addEventListener("click", function(event) {
if (event.target.className === "box") {
alert("Worrking...");
}
});
</script>
</body>
</html>
当单击内部div时发生事件，因为具有类“ box”
或使用此代码：
<html>
<head>
</head>
<body>
<section id="container">
<div class="box"><div>inner div</div></div>
<div class="box"></div>
<div class="box"></div>
</section>
<script>
var section = document.getElementById("container");
section.addEventListener("click", function(event) {
if (event.target.className === "box" || event.target.parentElement.className === "box") {
alert("Worrking...");
}
});
</script>
</body>
</html>
解决方案5
0 已采纳 2016-06-10 11:43:49
我认为此解决方案比其他建议的解决方案更通用：
if (event.target.className === "box" || event.target.parentNode.className === "box")
嵌入式iframe可以防止父div上的点击事件。 任何解决方法？
[英]Embedded iframe prevents click event on parent div. Any workaround?
object-fit:contain on child 防止父事件触发
[英]object-fit:contain on child prevents parent event from triggering
Angular Resize Event：防止用户在父 Div 之外调整内部 Div 的大小
[英]Angular Resize Event: prevent user from resizing inner Div outside of parent Div
克隆的jquery元素正在向父级触发事件 <div> 而不是孩子 <div> ？
[英]Cloned jquery elements are triggering events to parent <div> instead of child<div>?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.