如何使父級事件在單擊子元素時不會觸發，但不會阻止子元素事件

Question

讀一對夫婦像帖子后這一個 ，我試圖找到一種方式來可以點擊父div來隱藏自身，但無論是搜索框或“點擊事件2”的文字，當點擊毫不掩飾。

我使用了onclick停止傳播來防止div在輸入框上單擊時隱藏，但是如果對“ click for event 2”執行相同操作，則可以防止div隱藏，但也可以防止其他事件的發生。

總結一下：
1.單擊第一個“事件2”文本應僅將背景顏色更改為藍色和紅色，而不隱藏淺綠色的div。
2.單擊第二個“事件2”文本應顯示警報框，但不隱藏粉紅色父div

這些如何實現？ 在最近的問題之后 ，我嘗試將'preventPropagation'等添加到不同的元素以及其他一些嘗試，但無濟於事。

我是JS的新手，所以任何解釋都將非常有幫助。 謝謝。

 function doThis() { var el = document.querySelector('#test1'); if (el.style.display === 'flex') { el.style.display = 'none'; } else { el.style.display = 'flex'; } } function andThis() { var x = document.querySelector('.test2'); if (x.style.background === 'red') { x.style.background = 'blue'; } else { x.style.background = 'red'; } } function doThisTwo() { var re = document.querySelector('#test3'); if (re.style.display === 'flex') { re.style.display = 'none'; } else { re.style.display = 'flex'; } } function andThisTwo() { alert('hi'); } 

 #test1 { background: lightgreen; display: flex; } .test2 { background: red; } #test3 {background: pink} 

 <button onclick='doThis()'>click me</button> <div id='test1' onclick='doThis()'> text <input onclick='event.stopPropagation()' type="text"> <span class='test2' onclick='andThis()'>click for event 2</span> </div> <br><br> <button onclick='doThisTwo()'>click me too</button> <div id='test3' onclick='doThisTwo()'> text <input onclick='event.stopPropagation()' type="text"> <span class='test4' onclick='andThisTwo()'>click for event 2</span> </div> 

Answer 1

如果將事件作為隱藏函數的參數（例如doThis（event）），則可以在函數中評估event.target（用戶實際單擊的內容）。

因此，如果您單擊的事物的類=== event2按鈕類-不要運行該函數。