javascript - 如何阻止调用 javascript 函数的链接跳转到页面顶部

Question

你如何停止我这样的链接:

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

从点击后跳转到页面顶部？

Answer 1

很多时候您会看到人们使用onclick 属性，并在它的末尾简单地return false。虽然这确实可靠地工作，但它有点难看并且可能使您的代码库难以管理。

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

将 HTML 与 JavaScript 分开

如果您将标记与脚本分开，这对您和您的项目来说要好得多。

<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 后运行我们的函数(这样我们的 anchor 元素就存在，以便我们与其行为进行交互)。

我们的设置函数获取对这个 anchor 的引用，创建一个我们将在单击 anchor 时运行的函数，然后找到一种方法将该函数调用附加到 anchor 的点击事件 - 你已经失去理智了吗？这是 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 处理所有测试以确定在给定您的浏览器的情况下，执行这个 或那个 的最佳方法是什么。它消除了所有复杂的东西并将其移开，以便您可以自由发挥创造力。