javascript - 在某个子元素之后停止事件传播

Question

我不确定我是否正确地提出了问题，我有以下代码。

var ul = $( '#root' );

ul.on( 'click', 'li', function( e ) {
  console.log( e.currentTarget )
});

* {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
  <ul>
    <li></li>
    <li><div>Some Text</div></li>
    <li></li>
  </ul>
</div>

单击任何 li 项目后，控制台输出 li，即使是第二个 li 项目也是如此。

我怎样才能使用普通的 JavasScript 来达到同样的目的？将事件目标限制为 li 并且不超出任何子级？

我试过这个:

var root = document.getElementById( 'root' );

root.addEventListener( 'click', function( e ) {
  console.log( e.target )
}); 

但是在点击第二个 li 项时，它会记录 div

Answer 1

要在纯 JS 中完成这项工作，您可以调用 closest()来自 e.target确定事件是否由 li 引发，或 li 的 child :

var li = document.getElementById('root');

root.addEventListener('click', function(e) {      
  var li = e.target.closest('li');
  if (li)
    console.log(li.tagName); // a little redundant, but purely for demo purposes
});

* {
  border: 1px solid;
}

<div id="root">
  <ul>
    <li></li>
    <li>
      <div>Some Text</div>
    </li>
    <li></li>
  </ul>
</div>

请注意 closest() IE 本身不支持，但有一个 polyfill available .