禁用 JavaScript 中的連結
-
將
href設定為不同的函式以禁用 JavaScript 中的連結 -
使用
addEventListener()方法禁用 JavaScript 中的連結 -
使用
name屬性禁用 JavaScript 中的連結 - 使用 jQuery 禁用 JavaScript 中的連結
JavaScript 約定新增了一種更有效的方法來禁用錨標記 href。通常，我們可以設定 href="#" 以確保連結不會路由到任何地址。
此外，還有 JavaScript 函式方法來定義空分配，例如 href="javascript:void(0)"。同樣，我們也可以宣告 href="javascript://"，這意味著該值為 null。
在接下來的部分中，我們將看到我們如何在沒有 JavaScript 的情況下實現禁用連結，並使用更有意義的 JavaScript 實現有效的方法。我們將使用 addEventListener() 方法、name 屬性和禁用已定義連結的 jQuery 方法。
將 href 設定為不同的函式以禁用 JavaScript 中的連結
在這裡，我們將僅通過設定 href 以獲取空值來禁用連結。這不是暗示該概念的最佳方式，因為你經常需要更改啟用和禁用連結。
因此，保持 href 始終為空需要在每次修改中對連結進行硬編碼。
<html>
<head>
<title>Disable link</title>
</head>
<body>
<p>Disable link</p>
<a href="javascript://" id="home">Youtube</a><br>
<a href="javascript:void(0)" id="home">Google</a><br>
<a href="#" id="home">Git</a><br>
</body>
</html>
輸出：
javascript://、javascript:void(0) 和 # 評估 href 以得到 null 或未定義的結果。因此，我們得到了一個禁用的連結，但有一些方法可以更好地執行此任務。
使用 addEventListener() 方法禁用 JavaScript 中的連結
我們將有一個錨標籤，其中連結了 Google 的主頁。如果我們希望禁用連結，我們將在 JavaScript 部分手動定義一些條件。
這將使更改的路徑更容易。因此，每次單擊連結時都會觸發 eventListener()。
該功能將阻止單擊連結時的預設活動，即路由到連結的實際頁面。
<html>
<head>
<title>Disable Link using JavaScript</title>
</head>
<body>
<p>Disabled Link using JavaScript</p>
<a href='https://www.google.com/' id='home' target='blank'>Google</a>
</body>
<script>
var link = document.getElementById('home');
document.addEventListener('click', function (e) {
if (e.target.id === link.id) {
e.preventDefault();
}
});
</script>
</html>
輸出：
%20Method%20to%20Disable%20Links.gif)
使用 name 屬性禁用 JavaScript 中的連結
在本例中，我們將關注 name 屬性。基本任務是啟用 eventListener()，但這次的條件檢查將使用 name 屬性。
如你所見，評論 e.preventDefault(); 將導致路由到實際站點。因此，這是通過設定 preventDefault 來禁用連結的一種方法。
<html>
<head>
<title>Disable Link using JavaScript</title>
</head>
<body>
<p>Disabled Link using JavaScript</p>
<a href='https://github.com/' target='blank' name="git">GitHub</a>
</body>
<script>
document.addEventListener('click', function (e) {
if (e.target.name === 'git') {
e.preventDefault();
}
});
</script>
</html>
輸出：
使用 jQuery 禁用 JavaScript 中的連結
jQuery 執行的任務與我們已經檢查過的任務沒有什麼不同。但是語法有點不同。
在這裡，我們不會使用 preventDefault() 方法。相反，每次點選連結時我們都會返回一個布林值 false。
這將連續禁用預定連結。
<html>
<head>
<title>Disable link using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p> Disabled link using jQuery</p>
<a href="https://www.youtube.com/" id="home" target="blank">Youtube</a>
</body>
<script>
$(document).ready(function () {
$('#home').click(function () {
return false;
});
});
</script>
</html>
輸出：
