內部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.