react 事件冒泡阻止默认事件

初遇你时动了情2024-10-29 20:02

事件冒泡

e.stopPropagation

复制代码

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={(e) => {
      
      alert('你点击了 toolbar ！');
    }}>
      <Button onClick={() => alert('正在播放！')}>
        播放电影
      </Button>
      <Button onClick={() => alert('正在上传！')}>
        上传图片
      </Button>
    </div>
  );
}

点击播放电影，会调用播放电影的事件+弹出点击了boolbar这两个，这里在子组件中添加了阻止事件冒泡，他就不会再去执行父组件的""点击了boolbar"" 这个函数

阻止默认行为

复制代码

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('提交表单！');
    }}>
      <input />
      <button>发送</button>
    </form>
  );
}

不要混淆 e.stopPropagation() 和 e.preventDefault()。它们都很有用，但二者并不相关+

e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。
e.preventDefault() 阻止少数事件的默认浏览器行为。

react 事件冒泡 阻止默认事件

事件冒泡

阻止默认行为

react 事件冒泡阻止默认事件