如何有效停用不同瀏覽器之間的HTML連結？

使用綜​​合解決方案停用HTML 連結

停用HTML 連結可能會帶來挑戰，特別是在考慮Firefox 和Chrome 等瀏覽器之間的相容性時。以下是幾種有效停用連結的方法：

CSS 方法：

此方法是首選方法，大多數現代瀏覽器應該支援：

a.disabled {
    pointer-events: none;
}

但是，Internet Explorer 11 可能需要使用display: inline-block 或display: block for

焦點控制：

要防止元素取得焦點，請使用tabindex="-1":

<a href="#" disabled tabindex="-1">...</a>

點擊攔截：

使用JavaScript處理點擊並檢查停用情況屬性：

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

連結清除：

刪除href 屬性，有效停用連結：

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

假點擊Handler:

新增一個回傳false 的onclick 函數防止連結被追蹤：

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

樣式：

應用樣式以直觀地指示停用狀態：

a[disabled] {
    color: gray;
}

<a href="#" disabled aria-disabled="true">...</a>

ARIA輔助功能：出於輔助目的，請包含aria-disabled="true" 屬性以及停用狀態：請記住考慮跨瀏覽器相容性並仔細選擇最適合您特定需求的方法。

以上是如何有效停用不同瀏覽器之間的HTML連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！