React中如何默认禁用元素默认事件绑定及事件冒泡？

首先纠正一个误解：你看到的现象不是因为HTML元素默认绑定了所有事件，这是DOM原生的事件冒泡机制——当点击一个元素时，事件会从该元素开始向上逐层传递给父元素，不管内层元素有没有绑定对应事件，只要上层元素绑定了事件处理函数，就会被触发。React Native基于原生组件的事件系统，和Web的DOM事件机制不同，所以没有这个现象。

针对你的两个需求，具体可行性和实现方式如下：

1. 禁用“无绑定事件元素触发父元素事件”的行为 #

这个需求本质是阻止无事件绑定的元素触发事件冒泡，完全可行。核心思路是在这些元素上添加事件处理函数，调用e.stopPropagation()阻止事件向上传递。

比如针对你的示例修改<p>标签：

function AComponent() {
  const stopBubble = (e) => {
    e.stopPropagation();
  };

  return (
    <div style={{ width: '150px', border: '1px solid red' }} onClick={() => { console.log('container 1 called'); }}>
      <div style={{ width: '100px', border: '1px solid blue' }} onClick={() => { console.log('container 2 called'); }}>
        <p 
          style={{ fontSize: '16px', width: '75px', border: '1px solid teal' }}
          onClick={stopBubble}
        >
          this is a text.
        </p>
      </div>
    </div>
  );
}

这样点击<p>时，事件不会冒泡到父级的<div>，控制台就不会输出父级的日志了。

2. 默认禁用所有事件的冒泡 #

这个需求也可行，但不建议全局强制禁用（会破坏依赖事件冒泡的功能，比如第三方组件、事件委托实现的交互），更合理的方式是通过封装基础组件统一控制：

比如封装一个默认阻止冒泡的基础文本组件：

// 封装默认阻止冒泡的P组件
const BaseP = ({ onClick, children, ...props }) => {
  const handleClick = (e) => {
    e.stopPropagation();
    // 如果用户传入了自定义onClick，优先执行
    if (onClick) {
      onClick(e);
    }
  };

  return <p {...props} onClick={handleClick}>{children}</p>;
};

// 使用时直接替换原生p
function AComponent() {
  return (
    <div style={{ width: '150px', border: '1px solid red' }} onClick={() => { console.log('container 1 called'); }}>
      <div style={{ width: '100px', border: '1px solid blue' }} onClick={() => { console.log('container 2 called'); }}>
        <BaseP style={{ fontSize: '16px', width: '75px', border: '1px solid teal' }}>
          this is a text.
        </BaseP>
      </div>
    </div>
  );
}

同理，你可以封装BaseDiv、BaseSpan等所有需要默认阻止冒泡的HTML元素，项目中统一使用这些封装后的组件，就能实现“默认禁用事件冒泡”的效果。

如果确实需要全局级别的处理，可以在React根组件的捕获阶段监听事件，阻止冒泡，但这种方式风险较高，容易引发未知问题，谨慎使用：

function App() {
  const handleGlobalClick = (e) => {
    e.stopPropagation();
  };

  return (
    <div onClickCapture={handleGlobalClick}>
      {/* 应用所有内容 */}
      <AComponent />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者CodeLearnerBoy