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

Question

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 做到这一点，那将会更有帮助。

Answer 1

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

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

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

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

Answer 2

在 React 中，给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>
 );

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

How can I trigger a function only when only child divs are clicked using event bubble?

html

javascript

event-bubbling

reactjs