如何僅使 div 的 .text 可點擊以觸發事件？

Question

我有一些帶有 eventListener 的 DIV 用於點擊。 出於設計原因，這些 DIV 具有分配有 CSS 的邊距，並且有些具有換行符。 然而，不知何故，單詞周圍的區域也是可點擊的並觸發事件（最近的單詞）——我不想要的。 那么，除了顯示的 DIV 本身的文本之外，我怎樣才能防止其他任何內容都可以點擊，例如“趨勢”？

    <div id="wordbox">
        <div id="ai"><h2>artificial intelligence</h2></div>
        <div id="tr"><h4>trends</h4><br><br></div>
        <div id="dm"><h3>data mining</h3></div>
    </div>

  var wb = document.querySelectorAll("#wordbox > div");
  Array.from(wb).forEach(function(element, index) {
      element.addEventListener("click", function() {
        alert(element.id);
      });
  });

#ai{
    margin-left: 2.5%;
    margin-right: 1.0%;
} 

Answer 1

您正在將 click 事件添加到div ，它占用自己的空間，因此如果您想將 click 事件添加到內部文本元素，那么您應該使用element.children[0]之類的，

  element.children[0].addEventListener("click", function() {
    alert(element.id);
  });

和片段如下，

 var wb = document.querySelectorAll("#wordbox > div"); Array.from(wb).forEach(function(element, index) { element.children[0].addEventListener("click", function() { alert(element.id); }); });

 #ai{ margin-left: 2.5%; margin-right: 1.0%; }

 <div id="wordbox"> <div id="ai"><h2>artificial intelligence</h2></div> <div id="tr"><h4>trends</h4><br><br></div> <div id="dm"><h3>data mining</h3></div> </div>

Answer 2

同樣的想法，但稍微改變了 css

 var wb = document.querySelectorAll("#wordbox > div"); Array.from(wb).forEach(function (element, index) { element.children[0].addEventListener("click", function () { alert(element.id); }); });

 #ai{ margin-left: 2.5%; margin-right: 1.0%; } /* Make the texts not occupying the whole width */ #wordbox h2, #wordbox h3, #wordbox h4 { display: inline-block; cursor: pointer; }

 <div id="wordbox"> <div id="ai"><h2>artificial intelligence</h2></div> <div id="tr"><h4>trends</h4><br /><br /></div> <div id="dm"><h3>data mining</h3></div> </div>

Answer 3

我首先用跨度替換 div。 div 將始終采用容器元素的寬度。 在不隨意縮小 div 的情況下，使用 spans 更加簡潔。 然后稍微修改你的事件監聽器 function 它應該可以正常工作。

<div id="wordbox">
    <h2><span id="ai">artificial intelligence</span></h2>
    <h4><span id="tr">trends</span></h4><br><br>
    <h3><span id="dm">data mining</span></h3></a>
</div>

var wb = document.querySelectorAll("span");
wb.forEach(function(element) {
    element.addEventListener("click", function() {
      alert("clicked!!!");
    });
});