如何阻止调用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;">