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

點擊子錨點時阻止父級點擊事件

在父元素及其子元素中合併可點擊元素時，通常會遇到父元素和子元素都存在的情況點擊事件同時觸發。這種行為的發生是由於 DOM 中事件的冒泡性質。

為了防止在這種情況下觸發父級的點擊事件，可以採用多種解決方案。

檢查事件來源

利用父級點擊事件處理程序中的 e.target 屬性可以辨識觸發事件的實際元素。透過將 e.target 與父元素進行比較，可以確定點擊是否源自父元素或父元素中的其他位置。

停止事件傳播

或者，將單擊事件處理程序附加到子錨點並在其中調用 e.stopPropagation() 可以防止事件冒泡到父錨點。這樣，當子錨點被點擊時，父級的點擊事件就不會被觸發。

程式碼範例：

$("#clickable").click(function(e) {
    if ($(e.target).is("div")) {  // Check if the event originated from the <div>
        window.location = url;
        return true;
    }
});

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

透過應用這些方法中的任何一個，可以根據目標元素選擇性地處理點擊事件，確保僅當父元素是預期目標時才會觸發父元素的點擊事件。

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