javascript - 在动态创建的元素的点击事件监听器中包含子元素

Question

https://jsfiddle.net/y444stqv/3/

如何在父“点击”事件监听器中包含所有子元素？例如，我动态创建以下 html:

  <div id="content">
     <div id="donotexecuteclicklistener">But don't include me!</div>
      <!-- Dynamically generated -->
      <div class="items">
        <div class="item item-0">
          <h3>Item 0</h3>
          <p>Some desc</p>
        </div>

        <div class="item item-1">
          <h3>Item 1</h3>
          <p>Some desc</p>
        </div>

        <div class="item item-2">
          <h3>Item 2</h3>
          <p>Some desc</p>
        </div>

        <div class="item item-3">
          <h3>Item 3</h3>
          <p>Some desc</p>
        </div>
      </div>
    </div>

我想将点击处理程序绑定(bind)到每个“项目”div。因此，如果您单击任何作为“item”(即子“h3”或“p”标签)节点的子元素，我仍然想执行“handleClick”单击处理程序。但是，当您单击 ID“donotexecuteclicklistener”时，我不希望触发该单击处理程序。

  var items = [];
  var $content = document.getElementById('content');

  for (var i = 0; i < 4; i++) {
     // using ES6 template literals for ease
     var item = `
        <div class="item" id="item-${i}">
            <h3>Item ${i}</h3>
            <p>Some desc about item ${i}</p>
        </div>
     `;

     items.push(item);
  }

  var html = items.join(' ');
  $content.innerHTML = html;

  var handleClick = function(event) {
      console.log('do something with item', this, event);
  }

  $content.addEventListener('click', function(event) {
      console.log(event.target.id);
      var elements = $content.querySelectorAll('.item');
      var hasMatch = Array.prototype.indexOf.call(elements, event.target) >= 0;
      console.log(hasMatch);

      if (hasMatch) {
        handleClick.call(event.target, event);
      }
  })

Answer 1

默认情况下会发生这种情况!当一个元素在子元素上被触发时，它会“冒泡”到父元素。您可以看到 click 事件通过 Event.bubbles 属性 (https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) 冒泡。

元素是动态生成的这一事实不会影响此行为:事件仍将在动态生成的元素上冒泡。

为了获取事件发生的元素，您可以使用e.target。

ancestor.addEventListener('click', (e) => {
    const element = e.target;
});

注意:e.stopPropagation() 方法会取消此冒泡功能，因此您需要确保没有在任何地方调用它。如果您无法让事件冒泡，这可能是罪魁祸首。