父子 div 上的事件處理程序

Question

這是我的 HTML 文件

<div class="a">
    <div class="b">

    </div>
</div>
<script>
    document.querySelector('.a').onclick = ()=>{
        document.querySelector('.a').style.backgroundColor ='black'
    }
    document.querySelector('.b').onclick = ()=>{
        document.querySelector('.b').style.backgroundColor ='violet'
    }

</script>

當我點擊類 'b' 的 div 時，類 'a' 的 div 上的事件處理程序也被調用。 我只想調用帶有 'b' 類事件處理程序的 div。 有人可以幫忙嗎？

Answer 1

這就是Event Bubbling ，這意味着每個事件不僅會在目標元素上觸發，還會在其祖先元素上觸發。

為了防止這種行為，您可以使用Event.stopPropagation()來阻止事件傳播到目標元素的祖先元素。

 document.querySelector('.a').onclick = () => { document.querySelector('.a').style.backgroundColor = 'black' } document.querySelector('.b').onclick = (event) => { event.stopPropagation(); document.querySelector('.b').style.backgroundColor = 'violet' }

 div { width: 100px; height: 100px; } .a { padding: 40px; background: red; } .b { background: blue; }

 <div class="a"> a <div class="b">b</div> </div>

Answer 2

JS 中有一個叫做事件冒泡的概念。 默認情況下，發生在特定元素上的任何事件都將傳播到父元素及其父元素，依此類推，直到事件到達文檔。

為了阻止這種行為， Event.stopPropagation將進行救援，並將停止將事件傳播給父級。

因此，在這種情況下，在類b的 div 的onclick處理程序中調用e.stopPropagation ，即，內部 div 將停止將事件傳播到父 div。

 document.querySelector('.a').onclick = (e) => { document.querySelector('.a').style.backgroundColor = 'black' } document.querySelector('.b').onclick = (e) => { e.stopPropagation(); document.querySelector('.b').style.backgroundColor = 'violet' }

 .b { width: 50%; }

 <div class="a"> <div class="b"> Dummy </div> </div>

Answer 3

嘗試這個 ：

 document.querySelector('.a').onclick = ()=>{ document.querySelector('.a').style.backgroundColor ='black' } document.querySelector('.b').onclick = (e) => { e.stopImmediatePropagation(); document.querySelector('.b').style.backgroundColor ='violet' }

 <div class="a">a <br/> <div class="b"> Click here! </div> </div>