Href # 與 JavaScript 無效
-
何時對 JavaScript 連結使用
Href
#
-
何時對 JavaScript 連結使用
Href
javascript:void(0)
-
一種更好的方法來處理 JavaScript 中的
Href
#
和javascript:void()
- まとめ
本文將解釋何時在 href
中對 JavaScript 連結使用 #
和 javascript:void(0)
。因此,你將能夠更好地決定哪一個最適合你的用例。
在本文的最後,我們將解釋一種更好的使用 JavaScript 連結的方法。
何時對 JavaScript 連結使用 Href
#
如果你執行以下操作,你可以將 href
#
用於 JavaScript 連結。
onclick
事件處理程式中的Return false
。- 確保
onclick
呼叫的函式沒有錯誤。
JavaScript 中的 Onclick
事件處理程式中的 Return False
如果 onclick
中沒有 return false
宣告,連結會將使用者帶到頁面頂部。這發生在 onclick
中的函式執行之後。
在下面的程式碼中,我們有一個 HTML 連結,其 href
值設定為 #
。同時,連結有一個呼叫 clickMe
函式的 onclick
事件屬性。
當你單擊連結以執行 clickMe
功能時,程式碼將執行。但是,之後頁面會跳轉到頂部。
<body>
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="#" onclick="clickMe();">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
alert("You clicked me");
}
</script>
</body>
輸出:
你可以通過在 onclick
事件屬性中寫入 return false
來修復此行為。因此,函式執行後,連結不會跳轉到頁面頂部。
以下是更新後的程式碼。
<body>
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="#" onclick="clickMe(); return false;">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
alert("You clicked me");
}
</script>
</body>
輸出:
在 JavaScript 中確保 Onclick
呼叫的函式中沒有錯誤
如果 onclick
事件屬性中的函式包含錯誤,它將不會執行。結果,連結將跳轉到頁面頂部。
如果在 onclick
中有 return false
語句,也會發生這種情況,但呼叫的函式中有錯誤。
在下面的程式碼中,我們在 clickMe
函式中引入了一個不存在的變數。因此,當你單擊連結時,該功能將不會執行;相反,該連結會將使用者帶到頁面頂部。
那是因為不存在的變數會導致 ReferenceError
。
<body>
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="#" onclick="clickMe(); return false;">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
// We've introduced an undefined variable, so, this will lead to a reference error
alert("You clicked me" + t);
}
</script>
</body>
輸出:
何時對 JavaScript 連結使用 Href
javascript:void(0)
如果由於限制而不想使用 #
,你可以對 JavaScript 連結使用 javascript:void(0)
。但是,javascript:void(0)
違反了啟用 CSP 的 HTTPS 頁面上的內容安全策略。
同時,使用 javascript:void(0)
,你不需要 onclick
事件屬性中的 return false
。因此,該連結不會在函式執行後將使用者移動到頁面頂部。
在下面的程式碼中,我們使用 javascript:void(0)
作為 href
的值。執行程式碼時,你會觀察到連結在函式執行後沒有跳轉到頁面頂部。
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="javascript:void(0);" onclick="clickMe();">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
alert("You clicked me");
}
</script>
輸出:
一種更好的方法來處理 JavaScript 中的 Href
#
和 javascript:void()
當你發現自己想要在 href
中使用 #
或 javascript:void(0)
時,最好使用 HTML 按鈕。這是因為連結應該將你導航到某個位置,而不是觸發一些 JavaScript 程式碼。
此外,使用按鈕無需將其 href
屬性設定為 #
或 javascript:void(0)
的連結。更重要的是,你可以使按鈕看起來像一個帶有少量 CSS 的 HTML 連結。
我們將 HTML 按鈕的樣式設定為類似於以下程式碼中的連結。此外,我們還通過 JavaScript 附加了一個點選事件。
因此,當你單擊連結
時,你將看到一個 JavaScript 警報
視窗。
<head>
<style type="text/css">
.btn-link {
cursor: pointer;
color: #00f;
padding: 0;
border: 0;
font: inherit;
text-decoration: underline;
background-color: transparent;
}
</style>
</head>
<body>
<main style="font-size: 2em;">
<p>This button looks like a <button type="button" class="btn-link">link.</button></p>
</main>
<script type="text/javascript">
let allBtn = document.querySelectorAll('.btn-link');
for (let btnLink of allBtn) {
btnLink.addEventListener('click', function() {
alert("You clicked me");
}, false);
}
</script>
</body>
輸出:
まとめ
由於不需要的導航,你應該支援 javascript:void(0)
而不是 #
。當 onclick
中沒有 return false
時,會發生不需要的導航。
或者,你可以使用一個按鈕,使其看起來像一個 HTML 連結。
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn