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() 阻止少数事件的默认浏览器行为。
相关推荐
谦哥2 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF13 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man14 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬16 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C19 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2932 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js