首頁猿問父子 div 上的事件處理程序

父子 div 上的事件處理程序

JavaScript

三國紛爭 2023-03-03 10:50:17

這是我的 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。有人可以幫忙嗎？

查看完整描述

3 回答

慕哥6287543

TA貢獻1831條經驗獲得超10個贊

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

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

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>

反對回復 2023-03-03

蕭十郎

TA貢獻1815條經驗獲得超13個贊

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

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

因此，在這種情況下調用e.stopPropagation具有onclick類 ie 的 div 的處理程序b，內部 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%;

}

Dummy

</div>

反對回復 2023-03-03

湖上湖

TA貢獻2003條經驗獲得超2個贊

嘗試這個：

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/>

Click here!

</div>

反對回復 2023-03-03

3 回答
0 關注
161 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

父子 div 上的事件處理程序

父子 div 上的事件處理程序

3 回答

添加回答