如何防止在單擊子元素時觸發父級單擊事件？

了解巢狀點擊事件中的事件冒泡

當點擊父元素中都有點選事件偵聽器的元素時，可能會觸發兩個事件。當您不希望父元素的事件同時觸發時，這種行為（稱為事件冒泡）可能會導致不良結果。

在您的特定場景中，您在使用包含錨點的可點擊 div 時遇到此問題標籤。為了解決這個問題，讓我們來探索兩種方法：

1。原始事件的目標標識

要防止在點擊錨點時觸發父 div 的點擊事件，請檢查事件本身的來源。 jQuery 在傳遞給事件處理程序的事件參數中提供了一個 e.target 屬性。

$("#clickable").click(function(e) {
    var senderElement = e.target;
    if($(senderElement).is("div")) {
        window.location = url;
        return true;
    }
});

在這種方法中，您可以根據選擇器驗證事件是否源自 div 元素。如果不是div，則不會觸發window.location更改事件。

2.事件傳播停止

或者，您可以在點擊事件處理程序中使用e.stopPropagation() 方法來防止錨點的點擊事件冒泡：

$("#clickable a").click(function(e) {
    e.stopPropagation();
    // Do something specific to the anchor
});

透過這種方法，錨點的點擊事件執行自己的邏輯，而不將事件傳播到其父元素，有效防止div 的點擊事件觸發。

以上是如何防止在單擊子元素時觸發父級單擊事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！