事件冒泡怎么阻止？点击子元素父级也触发了

UX-海霞提问于 2026-03-26 08:13:19 阅读 20

前端

我在写一个弹窗组件，点击关闭按钮的时候，不仅触发了按钮的关闭逻辑，还冒泡触发了弹窗外层的点击事件（会重新打开弹窗），这明显不对啊！

我试过在子元素的 onClick 里加 e.stopPropagation()，但好像没生效，是不是 React 里写法不一样？下面是我的代码：

const Modal = () => {
  const handleOutsideClick = () => console.log('打开了弹窗');
  const handleClose = (e) => {
    e.stopPropagation();
    console.log('关闭弹窗');
  };

  return (
    <div onClick={handleOutsideClick}>
      <button onClick={handleClose}>×</button>
    </div>
  );
};

DOM操作事件冒泡

我来解答赞 9 收藏

反馈

1 条解答

UX-天硕 Lv1

在 React 里阻止事件冒泡的写法没错，但你这个情况可能是事件绑定的时机问题。试试这个方法，在父元素上加个条件判断，确保只有点击到弹窗外层时才触发。

const Modal = () => {

  const handleOutsideClick = (e) => {

    // 判断如果点击的是 button 或者 button 的子元素就直接返回

    if (e.target.closest('button')) return;

    console.log('打开了弹窗');

  };



  const handleClose = (e) => {

    e.stopPropagation();

    console.log('关闭弹窗');

  };



  return (

    

      

    


  );

};

用 closest 方法可以向上查找元素，这样就能准确判断点击目标了。这招我以前处理类似问题时经常用，省事又有效。记得测试一下各种情况，毕竟前端这种细节问题最烦人了。

2026-03-26 09:00