Href # 與 JavaScript 無效

Habdul Hazeez 2023年1月30日 2022年5月5日
  1. 何時對 JavaScript 連結使用 Href #
  2. 何時對 JavaScript 連結使用 Href javascript:void(0)
  3. 一種更好的方法來處理 JavaScript 中的 Href #javascript:void()
  4. まとめ
Href # 與 JavaScript 無效

本文將解釋何時在 href 中對 JavaScript 連結使用 #javascript:void(0)。因此,你將能夠更好地決定哪一個最適合你的用例。

在本文的最後,我們將解釋一種更好的使用 JavaScript 連結的方法。

何時對 JavaScript 連結使用 Href #

如果你執行以下操作,你可以將 href # 用於 JavaScript 連結。

  1. onclick 事件處理程式中的 Return false
  2. 確保 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>

輸出:

不返回 false 的 Onclick 事件

你可以通過在 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>

輸出:

返回 false 的 Onclick 事件

在 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>

輸出:

出現錯誤的 Onclick 事件

何時對 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 無效且沒有錯誤

注意
如果函式出現錯誤,根本不會執行,也不會跳轉到頁面頂部。

一種更好的方法來處理 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 avatar Habdul Hazeez avatar

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

相關文章 - JavaScript Href