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

防止子錨點點擊觸發父事件

在Web 程式設計中，通常需要將可點擊元素嵌套在其他可單擊元素中。但是，當在可單擊父元素中按一下錨元素（“a”標籤）時，兩個單擊事件都會觸發，從而導致不必要的行為。

問題定義：

目標是防止在點擊錨點子元素時觸發父元素的 onclick 事件。這可確保僅發生錨點的預期操作。

解決方案 1：檢查事件起源

jQuery 提供了一個「eventargs」對象，其中包含有關事件起源的資訊。透過檢查父元素 onclick 處理程序中的 eventargs，我們可以確定點擊是否源自錨點：

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

在此程式碼中，我們檢查事件的目標是否為「div」元素。如果是這樣，我們觸發父級的操作（重定向到特定 URL）。

解決方案 2：停止事件冒泡

事件冒泡是指通過DOM 樹。透過向錨點添加點擊處理程序並在其中調用“e.stopPropagation()”，我們可以防止事件冒泡到父元素：

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

這種方法會立即停止事件繼續它在DOM中的向上旅程，確保只有錨點的操作被執行。

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