首頁 > web前端 > css教學 > 如何有效停用不同瀏覽器之間的HTML連結?

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

Mary-Kate Olsen
發布: 2024-12-27 15:01:10
原創
339 人瀏覽過

How Can I Effectively Disable HTML Links Across Different Browsers?

使用綜​​合解決方案停用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中文網其他相關文章!

上一篇:如何使用 jQuery 檢測滾動條可見性? 下一篇:為什麼應該使用 而不是