如何僅在父div而不是子div中觸發功能

Question

<button onClick={onClickParent}>
<div className={"iconDiv"}>
<div className={"iconNameDiv"}> 
</button> 

我有這樣的結構。 當我單擊按鈕時，它會改變按鈕的顏色 但是，當我單擊內部 div 時，此 onclick 功能不起作用。 如何防止 div 內的 onclick ？ 唯一的父母

Answer 1

一般來說，按鈕標簽內的任何內容都應該用於按鈕點擊，所以我會選擇一個可用於對齊子項的div標簽。 下面是防止子元素觸發點擊的代碼，只需檢查類並確保其與父div的類相同。

 function test(event) { if(event.target.className === 'test') { console.log('execute click code'); } }

 .test { padding: 50px; }

 <div onClick="test(event)" class="test"> <div className="test1"> asdfasdf</div> <div className="test2"> asdfasdf</div> </div>