前言

略

問題

有代碼如下：

<div class='preview_image_container'><!--圖片--><div onclick='details(this)'><img class='preview_image' src='xx.png' /><div class='preview_name' >xxx</div></div><!--刪除按鈕--><img class='preview_delete' src='/img/icon-delete.png' onclick='delete(this)'> </div>

此時產(chǎn)生一個問題：當(dāng)點(diǎn)擊刪除按鈕時，同時觸發(fā)details(this)函數(shù)和delete(this)函數(shù)。
要解決此問題需要使用 stopPropagation。

解決辦法

在delete(this)函數(shù)中調(diào)用event.stopPropagation()阻止事件冒泡到父元素（這樣就阻止details(this)函數(shù)的執(zhí)行）。

修改delete函數(shù)為：

function delete(e) {event.stopPropagation();/*需要執(zhí)行的代碼*/... }

stopPropagation

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程序被執(zhí)行。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的阻止JavaScript事件冒泡到父元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。