前言

略

問題

有代碼如下：

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

此時產生一個問題：當點擊刪除按鈕時，同時觸發details(this)函數和delete(this)函數。
要解決此問題需要使用 stopPropagation。

解決辦法

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

修改delete函數為：

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

stopPropagation

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。