如何仅在使用事件气泡单击子 div 时触发函数？答案

【问题标题】：How can I trigger a function only when only child divs are clicked using event bubble?如何仅在使用事件气泡单击子 div 时触发函数？
【发布时间】：2021-11-12 14:22:51
【问题描述】：

const handleMenu = e => {
    console.log(e.target);
    e.stopPropagation();
}

我想在单击子 div 时控制事件。例如：

    <div onclick={handleMenu}>
        <button>My orders</button>
        <button>Payment</button>
    </div>

所以，我只想在单击这些按钮时触发 handleMenu 函数，而不是在单击父 div 的区域时触发，除了那些按钮区域。我该怎么做？

是的，我正在使用reactjs。如果有任何其他方法可以使用 reactjs 做到这一点，它会更有帮助。

【问题讨论】：

为什么不在按钮上添加点击事件。
向子div添加事件并停止传播
@BimalPariyar，因为我有 8 到 10 个子组件。因此在每个组件中添加事件效率不高。我需要创建一种可重用的功能方式。
也许我们可以检查目标类型，如 e.target.tagName === "BUTTON"，并执行功能。
@BimalPariyar，是的，这是一种方式！但需要谨慎使用标签名称，以免子标签名称与父标签名称匹配。如果在子组件中使用多个标签名称，则需要更多条件。还有其他更简单的方法吗？

标签： javascript html reactjs event-bubbling

【解决方案1】：

您可以通过以下方式进行操作。附加到孩子的事件回调，如下所示..

if(event.currentTarget != event.target ) return;
....

目标事件 = 触发事件的元素。

currentTarget event = 具有事件监听器的元素。

【讨论】：

感谢@Abu Sufian。这就是我想要的。

【解决方案2】：

在反应中，给div元素加一个ref，判断target是否等于ref，看是不是self事件

  const myRef = React.useRef(null);
  const handleMenu = (e) => {
  myRef.current!==e.target
  console.log(myRef.current);
  e.stopPropagation();
  };

 return (
   <div ref={myRef} onClick={handleMenu}>
     <button>My orders</button>
     <button>Payment</button>
   </div>
 );

【讨论】：