為什么 mouseDown 事件不會在 React 中傳播？

Question

我有一個簡單的 React 組件，其中有兩個正方形，它們位於同一個絕對 position 中。 藍色方塊覆蓋紅色方塊。

 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>

將事件偵聽器附加到反應組件時，只有頂部的組件捕獲事件並且它沒有到達紅色方塊。 為什么會這樣？ 這是默認行為嗎？ 我認為事件傳播僅使用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>

Answer 1

這不是 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>

或者使用 JavaScript 直接使用 DOM：

 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 <div/>的 HTML 是<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>