适当地使用onClick

Question

处理onClick事件的正确方法是什么？

<div class='container' onClick={() => { *do something* }}>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
</div>

如果单击其中一个子元素，这将导致onClick也触发。如何将事件限制为仅在容器上触发？

Answer 1

检查event.currentTarget。

<div class='container' onClick={(e) => { if(e.currentTarget.class == "container") { do something } }}>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
</div>

Answer 2

限制对事件目标的操作。那样的。

document.querySelector('.container').addEventListener('click', function(e){
  e.target.doSomething;
});

/*
* document.querySelector('.container')
*   .addEventListener('click', (e) => {
*   e.target.doSomething;
*})
*/