如何仅使 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

您将点击事件添加到div，它占用了自己的空间，因此如果您想将点击事件添加到内部文本元素，那么您应该使用element.children[0]，例如，

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

和sn-p如下，

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 替换为 span。 div 将始终采用容器元素的宽度。在不随意缩小 div 的情况下，使用 spans 更加简洁。然后稍微修改你的事件监听函数，它应该可以正常工作。

<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!!!");
    });
});