javascript:void(0) 的常見使用場景

更新時間：2025年05月08日 09:21:52 作者：Komorebi_9999

javascript:void(0)?是一個常見的 JavaScript 偽協(xié)議,它主要實現(xiàn)阻止鏈接的默認行為和占位,本文主要介紹了javascript:void(0) 的常見使用場景,具有一定的參考價值,感興趣的可以了解一下

基本含義

javascript: 是一種偽協(xié)議，它告訴瀏覽器后面跟隨的是一段 JavaScript 代碼。void 是 JavaScript 中的一個操作符，void(0) 的作用是對給定的表達式求值，然后返回 undefined。所以 javascript:void(0) 本質(zhì)上就是執(zhí)行一段 JavaScript 代碼，其返回值為 undefined。

常見使用場景

1. 阻止鏈接默認行為

在 HTML 的 <a> 標簽中，當你不想讓鏈接跳轉(zhuǎn)到指定的 href 地址，同時又想在點擊鏈接時執(zhí)行一些 JavaScript 代碼，就可以使用 javascript:void(0)。示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  onclick="alert('點擊了鏈接')">點擊我</a>
</body>

</html>

在這個例子中，點擊鏈接不會進行頁面跳轉(zhuǎn)，而是觸發(fā) onclick 事件，彈出一個提示框。

2. 占位用途

在一些情況下，你可能還沒有確定鏈接的具體跳轉(zhuǎn)地址或者操作邏輯，但又需要一個鏈接元素，此時可以先使用 javascript:void(0) 作為 href 的值。示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow" >待實現(xiàn)的鏈接</a>
</body>

</html>

替代方案

在現(xiàn)代的前端開發(fā)中，更推薦使用事件監(jiān)聽器來阻止鏈接的默認行為，而不是使用 javascript:void(0)。示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a id="myLink" href="#" rel="external nofollow" >點擊我</a>
    <script>
        const link = document.getElementById('myLink');
        link.addEventListener('click', function (event) {
            event.preventDefault();
            alert('點擊了鏈接');
        });
    </script>
</body>

</html>

使用 event.preventDefault() 可以更清晰地表達阻止默認行為的意圖，并且使 HTML 和 JavaScript 代碼分離，提高代碼的可維護性。

到此這篇關(guān)于javascript:void(0) 的常見使用場景的文章就介紹到這了,更多相關(guān)javascript:void(0) 使用場景內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: