我有嵌套的div元素。外面应该有可以移动和点击的事件。我想启用一个嵌套元素作为按钮，并防止外部事件发生。在这个例子中，当我们点击红色部分时，两个事件都发生了。当我们点击红色部分时，如何从绿色部分停止事件？stopPropagation((未完成此操作。我正在使用React，我的结构比示例中更复杂。但为了清楚起见，我想减少。
如果有人能帮忙，我会很高兴的。
#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;
}<!DOCTYPE html>
<html lang="en">
<head>
</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(){
console.log("Bye");}
</script>
</body>
</html>我认为这与React Hooks有关。在这里，您可以看到stopPropagation不起作用的示例：
import React, { useState } from 'react';
function Test() {
let [test, setTest] = useState(false);
return (
<div id="wrapper"
style={styleBigCircle}
onMouseUp={() => {
setTest(false);
console.log("Hello", test)
}
}>
<div id="center"
style={styleSmallCircle}
onClick={(e) => {
e.stopPropagation();
setTest(!test);
console.log("Bye", test)
}}
>
</div>
</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;
如果有人知道如何解决这个问题，我会很高兴。
您正在处理不同的事件，因此为了防止子元素触发父元素，您需要在该事件上添加相同的事件和stopPropagation()：
<div
id="center"
style={styleSmallCircle}
onMouseUp={e => {
e.stopPropagation();
}}
onClick={e => {
setTest(!test);
console.log("Bye");
}}
/>
以下是一个完整的工作示例：
const Test = () => {
let [test, setTest] = React.useState(false);
return (
<div
id="wrapper"
style={styleBigCircle}
onMouseUp={() => {
console.log("Hello");
}}
>
<div
id="center"
style={styleSmallCircle}
onMouseUp={e => {
e.stopPropagation();
}}
onClick={e => {
console.log("Bye");
}}
/>
</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"
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Test />, rootElement);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>使用event.stopPropagation()来阻止父触发器。
#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;
}<!DOCTYPE html>
<html lang="en">
<head>
</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(event){
event.stopPropagation()
console.log("Bye");
}
</script>
</body>
</html>