javascript - 使用 React 监听整个 dom 上的点击事件的正确方法是什么？

Question

我已经使用 react 创建了一个日历。它只是一堆li。我希望能够单击该页面并出现一个弹出窗口来输入新的约会。我知道我可以使用 react-bootstrap 并将每个 li 包装在 OverlayTrigger 中，并使用它来创建我的 popover >，但这会向我的 dom 添加大量代码。

当我们使用jQuery时，我们只需将事件监听器附加到body，然后我们就可以添加我们点击的任何 li 上的弹出窗口。

有没有办法在没有 jQuery 的情况下做到这一点？

Answer 1

考虑到您在某些父 ul 元素中只有一堆 li，请在父元素上绑定(bind)一个事件监听器，但在事件处理程序中，检查实际目标是否触发事件的是一个 li 并采取相应的行动。

<ul id="parent">
  <p>Some para</p>
  <li class="cell 1">Element 1</li>
  <li class="cell 2">Element 2</li>
  <li class="cell 3">Element 3</li>
</ul>
  <script>
    document.getElementById("parent").addEventListener("click", function(e) {
      if(e.target && e.target.nodeName == "LI") {   
          console.log("List item "+ e.target.className);
      }else{
          console.log('not a list item');
      }
    });
  </script>

这是一个bin尝试一下这个方法:)