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会处理所有测试以确定 this 或的最佳方法。它需要所有复杂的东西并将其移开，以便您可以自由发挥创意。

Answer 2

添加返回false。我相信如果没有它，页面将重新加载。

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

Answer 3

只需返回错误onClick of 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事件一起提供给类＆＃34; action-class＆＃34;用你喜欢的任何框架或简单的JavaScript。

Answer 7

您可以使用此替代语法：

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

如何阻止调用javascript函数的#link从跳转到页面顶部

7 个答案:

从JavaScript中分离HTML

使用jQuery，这更容易