<div id="parent">
<div>
<button onClick={() => console.log("a")}>a</button>
</div>
<button onClick={() => console.log("b")}>b</button>
<button onClick={() => console.log("c")}>c</button>
</div>
如上，它有一個父元素和一個子元素。這種情況下，是不是可以通過父元素阻止子元素被點擊，或者阻止子元素的onclick事件被觸發呢？
在上述情況下，無論點擊哪個按鈕，都不應該生成console.log。
有一種方法可以通過添加另一個元素來覆寫父元素，但我很好奇如何僅通過父元素來防止它。
uj5u.com熱心網友回復：
在前端，有一個名為“React”的庫。它有一個“UseState”功能。
const [disabled, setDisabled] = useState(false);
在這種情況下，您可以將變數設定為true
<button onClick={() => setDisabled(true)}>a</button>
通過單擊按鈕以及要禁用它的位置。放置
<button disabled={ disabled } onClick={() => console.log("b")}>b</button>
uj5u.com熱心網友回復：
將 CSS 分配pointer-events: none給父級，以下將針對<button>頁面上的第一個：
document.querySelector('button').parentElement.style='pointer-events:none'
使用 OP 特定布局，這將適用于所有三個<button>：
document.getElementById('parent').style='pointer-events: none'
此外，行內 onclick 不適用于普通箭頭功能，如果您確實需要使用箭頭行內事件，它需要是iife：
<button onclick="(() => console.log('b')()">
實際上沒有必要這樣做，實際上行內事件處理程式是垃圾使用 onevent 屬性或事件偵聽器，讀取事件和事件委托。
<button>下面的示例直接顯示了頁面上
每個人的快速方法。
document.querySelectorAll('button').forEach(btn => btn.style='pointer-events:none');<div id="parent">
<div>
<button onClick='console.log("a")'>a</button>
</div>
<button onClick='console.log("b")'>b</button>
<button onClick='console.log("c")'>c</button>
</div>uj5u.com熱心網友回復：
對于 vanilla JavaScript，還有一種方法可以防止子事件觸發，即使它們是預先分配的。
您可以向父級添加一個點擊事件，通過在函式中useCapture分配第三個引數然后在函式體中進行設定。trueaddEventListenere.stopPropagation
這將確保此事件在正常事件階段之前觸發，因此它的所有子點擊事件都不會觸發。它還保持按鈕可點擊并且不會改變它們的外觀。
document.querySelector('#parent').addEventListener('click', e => e.stopPropagation(), true);<div id="parent">
<div>
<button onclick="console.log('a')">a</button>
</div>
<button onclick="console.log('b')">b</button>
<button onclick="console.log('c')">c</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477449.html
標籤：javascript
上一篇：后臺切換JS只作業一次