我有一个简单的React组件，两个绝对位置相同的正方形。蓝色方块覆盖红色方块。
function App() {
return (
<div className="App">
<div>
<div
style={{
position: "absolute",
backgroundColor: "red",
width: 100,
height: 100
}}
onMouseDown={() => console.log("Red!")}
/>
<div
style={{
position: "absolute",
backgroundColor: "blue",
width: 100,
height: 100
}}
onMouseDown={() => console.log("Blue!")}
/>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>将事件侦听器附加到react组件时，只有顶部的组件才能捕获事件，并且不会到达红色方块。为什么会这样？这是默认行为吗？我以为事件传播只停止使用event.stopPropagation()？使用香草javascript时，两个方块都会捕获事件。
function clickRed() {
console.log("Red!");
}
function clickBlue() {
console.log("Blue!");
}<div id="root">
<div style="position: absolute; background-color: red; min-width: 100px; min-height: 100px;" onmousedown="clickRed();" />
<div style="position: absolute; background-color: blue; min-width: 100px; min-height: 100px;" onmousedown="clickBlue();"/>
</div>这不是React，而是事件在DOM中的工作方式。问题是事件从最内层的孩子传播到这些孩子的最外祖先，并通过DOM树传播。但是您的元素是兄弟姐妹，没有父子关系。因此，按z顺序位于另一个上方的那个将是接收事件的那个（然后传播到该元素的父对象，而不是其同级对象）。
使用香草javascript时，两个方块都会捕获事件。
与您在问题中定义的DOM结构不同。这是直接的HTML和内联事件处理程序：
<div class="App">
<div>
<div
style="
position: absolute;
background-color: red;
width: 100px;
height: 100px;
"
onmousedown='console.log("Red!")'
></div>
<div
style="
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
"
onmousedown='console.log("Blue!")'
></div>
</div>
</div>或直接使用DOM使用JavaScript：
const app = document.createElement("div");
app.innerHTML = `
<div>
<div
style="
position: absolute;
background-color: red;
width: 100px;
height: 100px;
"
class="red"
></div>
<div
style="
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
"
class="blue"
></div>
</div>
`;
app.querySelector(".red").addEventListener("mousedown", () => console.log("Red!"));
app.querySelector(".blue").addEventListener("mousedown", () => console.log("Blue!"));
document.getElementById("root").appendChild(app);<div id="root"></div>重新编辑并添加以下示例：
function clickRed() {
console.log("Red!");
}
function clickBlue() {
console.log("Blue!");
}<div id="root">
<div style="position: absolute; background-color: red; min-width: 100px; min-height: 100px;" onmousedown="clickRed();" />
<div style="position: absolute; background-color: blue; min-width: 100px; min-height: 100px;" onmousedown="clickBlue();"/>
</div>那里的HTML不正确。在HTML中， 它<div/>与<div>-只是一个开始标记完全相同。结果，您的div元素被嵌套（蓝色在红色里面）。相当于JSX的HTML<div/>是<div></div>：
function clickRed() {
console.log("Red!");
}
function clickBlue() {
console.log("Blue!");
}<div id="root">
<!-- Scroll right in the stack snippet to see the difference at the end ⇒ ⇒ ⇩⇩⇩⇩⇩⇩⇩ -->
<div style="position: absolute; background-color: red; min-width: 100px; min-height: 100px;" onmousedown="clickRed();" ></div>
<div style="position: absolute; background-color: blue; min-width: 100px; min-height: 100px;" onmousedown="clickBlue();"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句