如何阻止調用javascript函數的#link從跳轉到頁面頂部

Question

你如何阻止我這樣的鏈接：

<a href="#" onClick="submitComment()">

從點擊后跳到頁面頂部？

Answer 1

很多時候你會看到人們使用onclick屬性，並且只是在結尾處return false 。 雖然這確實可行，但它有點難看，可能會使您的代碼庫難以管理。

<a href="#" onClick="submitComment(); return false;">

從JavaScript中分離HTML

如果你將標記與腳本分開，那對你和你的項目來說會好得多。

<a id="submit" href="enableScripts.html">Post Comment</a>

使用上面的HTML，我們可以找到這個元素，並在用戶點擊元素時連接一個處理程序。 我們可以從外部.js文件中完成所有這些操作，以便我們的HTML保持良好和干凈，不受任何腳本編寫：

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
    document.attachEvent("onreadystatechange", setup);
} else {
    document.onload = setup;
}

function setup () {
    var submit, submitComment;
    submit = document.getElementById("submit");
    submitComment = function (e) {
        e = e || window.event;
        e.preventDefault();
        alert("You clicked the link!");
    };
    if (submit.addEventListener) {
        submit.addEventListener("click", submitComment, false);
    } else if (submit.attachEvent) {
        submit.attachEvent("onclick", submitComment);
    } else {
        submit["onclick"] = submitComment;
    }
}

上面的代碼中有很多內容，但讓我們在30,000英尺的范圍內運行它。 我們首先弄清楚當瀏覽器加載頁面時如何最好地設置我們的代碼。 理想情況下，我們想在DOM准備就緒時這樣做。

在幾次條件檢查之后，我們設法指示瀏覽器在准備好DOM之后運行我們的函數（這樣我們的錨元素就可以讓我們與它的行為進行交互）。

我們的setup函數獲取對這個錨點的引用，創建一個我們在單擊錨點時運行的函數，然后找到一種方法將該函數調用附加到錨點的click事件 - 失去理智嗎？ 這是JavaScript開發人員一段時間以來不得不處理的瘋狂。

使用jQuery，這更容易

也許你已經聽說過jQuery，並想知道為什么它如此受歡迎。 讓我們解決同樣的問題，但這次使用jQuery而不是原始的vanilla JavaScript。 假設以下標記：

<a id="submit" href="enableScripts.html">Post Comment</a>

我們需要的唯一JavaScript（感謝jQuery）是這樣的：

$(function(){
    $("#submit").on("click", function(event){
        event.preventDefault();
        submitComment();
    });
});

就是這樣 - 這就是全部。 jQuery的處理所有的測試來確定的，因為你的瀏覽器，最好的辦法是做這樣或那樣的東西。 它需要所有復雜的東西並將其移開，以便您可以自由發揮創意。

Answer 2

添加返回false。 我相信沒有它，頁面將重新加載。

<a href="#" onClick="submitComment(); return false;">

Answer 3

只需返回false on on Hyperlink

它不會向上滾動頁面，即它仍然是它的位置

Answer 4

除非你需要錨到實際去某處，否則根本不需要使用“href =”引用。

嘗試使用<a id="stay-put">Submit Comment</a>

然后你的JavaScript看起來像這樣：

$("#stay-put").click(function(){
    submitComment();
});

Answer 5

嘗試使用：

<a href="#a" onclick="myFunction()">Javascript is sweet!</a>

這會將頁面錨定在它所在的位置。 我有同樣的問題，這對我來說是一個簡單而好的修復。

Answer 6

另一種簡單的方法是

<a href="javascript: void(0)" class="action-class">Link</a>

然后，您可以使用onClick事件將單獨的代碼添加到類“action-class”中，使用您喜歡的任何框架或純JavaScript。

Answer 7

您可以使用此替代語法：

<a href="javascript:submitComment()">