我有一個<button>組件覆寫在<div>顯示影像的組件上。
按鈕組件是一個紅色的[X]，如下圖所示。我有一個單獨的 onClick 偵聽器，用于 <button>和<div>. 我想確保當按鈕的 onClick 被觸發時，即單擊 [X] 時，<div>不應該運行的 onClick。
這個怎么做？
我已經嘗試過了，但它不起作用
首先是運行的 onClick，<button>然后是運行的<div>onCLick
const onClickButtonHandler = (event) => {
event.preventDefault();
console.log("BTN HANDLER")
};
const onClickDivHandler = (event) => {
console.log("DIV HANDLER")
};
uj5u.com熱心網友回復：
document.getElementById('mydiv')
.addEventListener('click', function (event) {
console.log("div clicked")
});
document.getElementById('xAndDiv')
.addEventListener('click', function (event) {
console.log("x clicked, div click also executes")
});
document.getElementById('x')
.addEventListener('click', function (event) {
event.stopPropagation()
console.log("only x click executes")
});.div {
background-image: url( https://png.pngtree.com/thumb_back/fw800/back_our/20190628/ourmid/pngtree-clear-sample-newspaper-spring-forest-playground-background-design-image_276784.jpg);
background-size: cover;
height: 250px;
}
.x {
color:red;
}<div id="mydiv" class="div">
<button class="x" id="xAndDiv" >X & Div </button>
<button class="x" id="x" >Only X</button>
</div>您需要在按鈕的 onclick 中停止事件的傳播
const onClickButtonHandler = (event) => {
event.stopPropagation();
console.log("BTN HANDLER")
};
它可以防止事件冒泡到父級別
反應參考的代碼沙箱https://codesandbox.io/s/awesome-thunder-1x0coz?file=/src/App.js
stopPropagation在MDN上閱讀更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/440141.html
標籤：javascript html jQuery css 反应