內DIV防止事件在父DIV觸發

考慮下面的HTML代碼：內DIV防止事件在父DIV觸發

<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。爲什麼？我該如何改變它？

來源

2016-06-10 Unknown developer

你檢查什麼'event.target.className'回報，當你點擊內部的div text.it沒有類 –

我覺得這個解決方案是更普遍比其他建議：

if (event.target.className === "box" || event.target.parentNode.className === "box")

來源

2016-06-10 11:43:49

如果我點擊文本內部div，事件不會被觸發。爲什麼？

事件設置爲<div class="box">元素，並且<div>inner div</div>位於其上。當你點擊它時，只能將事件觸發到最上面的元素，而不是觸發下面的元素。

爲了使工作組pointer-events: none;在內的div：

<div style="pointer-events:none;">inner div</div>

JSFiddle

來源

2016-06-10 11:24:04

至於爲什麼它沒有被觸發;事件被觸發，但event.target.className不是「box」，因爲event.target不是外部div，而是圍繞文本的內部。

來源

2016-06-10 11:27:34

你的代碼沒問題。發生這個問題的原因是你沒有使用box類（它是住在div.box中的div）點擊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>

來源

2016-06-10 11:38:53

內格文本不包括類的「盒子」，試試這個代碼：

<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>

時點擊內部事件發生因爲有類「盒子」

或使用此代碼：

<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>

來源

2016-06-10 11:39:57 Ehsan

內DIV防止事件在父DIV觸發

回答

相關問題