react 事件冒泡 阻止默认事件

事件冒泡

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() 阻止少数事件的默认浏览器行为。
相关推荐
小满zs6 分钟前
React第十二章(useSyncExternalStore)
前端·javascript·react.js
Mrs_Lupin8 分钟前
React核心思维模型(一)
前端·react.js·前端框架
你不讲 wood21 分钟前
预览 PDF 文档
开发语言·前端·javascript·pdf·html·node·文件预览
我就说好玩40 分钟前
基于echarts、php、Mysql开发的数据可视化大屏
前端·后端·信息可视化·echarts
2301_7891695442 分钟前
ai说ajax
前端·javascript·ajax
Mr.app1 小时前
JS动态调用变量
javascript
小白讲前端1 小时前
炫酷的登录框!(附源码)
前端·javascript·css·html
架构师ZYL1 小时前
python之数据结构与算法(数据结构篇)-- 元组
开发语言·javascript·python·信息可视化·数据结构与算法
二川bro1 小时前
CSS兼容处理
前端·css
XiaoYu20021 小时前
31.JS高级-包管理工具详解
前端·javascript·程序员