Question

考虑以下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，则不会触发事件。为什么？我怎么能改变它？

Answer 1

如果我点击文本内部div，则不会触发事件。为什么呢？

事件设置为<div class="box">元素，<div>inner div</div>位于其上方。单击它时，只能触发事件到最顶层的元素而不是它下面的元素。

要使它在内部div上设置pointer-events: none;：

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

JSFiddle

Answer 2

至于为何没有触发;触发一个事件，但event.target.className不是“box”，因为event.target不是外部div，而是包围文本的内部。

Answer 3

你的代码很好。出现此问题的原因是您单击没有box类的div（它的div位于div.box）。您可以通过单击“inner 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>

Answer 4

内部div文本不包含类＆＃34;框＆＃34; ，试试这段代码：

Null / 0

单击内部div时发生事件因为有类＆＃34;框＆＃34;

或使用此代码：

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

Answer 5

我认为这个解决方案比其他建议更为通用：

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

内部div可防止在父div中触发事件

5 个答案: