React Hooks嵌套Div事件阻止失效问题求助

这问题我之前也踩过坑！你遇到的核心问题是事件类型不匹配：外层绑定的是onMouseUp事件，内层却在onClick里调用e.stopPropagation()——这俩根本不是同一个事件流，所以阻止不了外层的mouseup事件触发。

先搞懂事件差异 #

• click事件是由mousedown + mouseup两个事件触发的独立事件类型
• stopPropagation()只能阻止当前事件的冒泡传播，对其他事件类型完全无效

拿你的原生JS例子来说，如果把外层也改成click事件，stopPropagation()就能正常工作：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #bigCircle { display: flex; justify-content: center; align-items: center; width: 180px; height: 180px; border-radius: 50%; background-color: green; }
    #smallCircle { width: 40px; height: 40px; border-radius: 50%; background-color: red; }
  </style>
</head>
<body>
<div id="bigCircle">
  <div id="smallCircle"></div>
</div>
<script>
document.getElementById("bigCircle").addEventListener("click",myBigCircle);
document.getElementById("smallCircle").addEventListener("click",mySmallCircle);
function myBigCircle(){ console.log("Hello");}
function mySmallCircle(e){ 
  e.stopPropagation(); // 现在能阻止外层click事件了
  console.log("Bye");
}
</script>
</body>
</html>

针对React的解决方案 #

根据你的需求，分两种情况处理：

方案1：统一事件类型（推荐）

如果外层的onMouseUp可以换成onClick，直接把内外层都改成onClick事件，这样stopPropagation()就能正常生效：

import React, { useState } from 'react';

function Test() {
  const [test, setTest] = useState(false);

  return (
    <div 
      id="wrapper" 
      style={styleBigCircle} 
      onClick={() => { 
        setTest(false); 
        console.log("Hello", test);
      }}
    >
      <div 
        id="center" 
        style={styleSmallCircle} 
        onClick={(e) => { 
          e.stopPropagation(); 
          // 用函数式更新避免闭包导致的旧值问题
          setTest(prevTest => !prevTest); 
          console.log("Bye", test);
        }} 
      />
    </div>
  );
}

const styleBigCircle = { 
  display: "flex", 
  justifyContent: "center", 
  alignItems: "center", 
  width: "180px", 
  height: "180px", 
  borderRadius: "50%", 
  backgroundColor: "green" 
};
const styleSmallCircle = { 
  width: "40px", 
  height: "40px", 
  borderRadius: "50%", 
  backgroundColor: "red" 
};

export default Test;

方案2：必须保留onMouseUp的情况

如果外层一定要用onMouseUp，那内层也需要绑定onMouseUp事件并阻止冒泡，同时保留onClick的逻辑：

import React, { useState } from 'react';

function Test() {
  const [test, setTest] = useState(false);

  // 阻止mouseUp事件冒泡到外层
  const handleSmallMouseUp = (e) => {
    e.stopPropagation();
  };

  const handleSmallClick = (e) => {
    e.stopPropagation();
    setTest(prevTest => !prevTest);
    console.log("Bye", test);
  };

  return (
    <div 
      id="wrapper" 
      style={styleBigCircle} 
      onMouseUp={() => { 
        setTest(false); 
        console.log("Hello", test);
      }}
    >
      <div 
        id="center" 
        style={styleSmallCircle} 
        onClick={handleSmallClick}
        onMouseUp={handleSmallMouseUp}
      />
    </div>
  );
}

// 样式同上...
export default Test;

额外提醒 #

注意状态更新的异步性：直接用!test可能会拿到旧的状态值，推荐用函数式更新setTest(prev => !prev)来确保获取最新状态。

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