如何在点击锚链接时停止页面跳转？

Question

有没有办法在单击锚链接时避免页面跳转，使页面视图不发生变化？

- Tomkay

---

你能给我们展示一下“跳跃”代码的例子吗？ - Soufiane Hassou

如果您不希望视图发生更改，为什么要使用锚链接？请澄清这一点。 - Joeri Hendrickx

我知道这篇文章很老了，但是回答@JoeriHendrickx时有时候这不是一个选择。例如，我进行A/B分割测试需要修改客户页面加载后的行为。我不能编辑他们原始的代码，但必须通过数据来确定是否应该进行更改。这个问题是完全有效的。 - Xandor

Answer 1

处理这个问题最语义化和有意义的方法是从JavaScript中处理onclick事件。理想情况下，将该文件存储在单独的文件中是最好的选择，但是在您的问题文件中包含一个内联脚本就足够了。如果您已经在使用像jQuery这样的JavaScript库，以下是我建议解决此问题的方法：

分配ID
在锚点中包括id属性，以便可以使用jQuery进行选择：

<a href="#anchor" id="mylink" title="Title Here">Link Text</a>

绑定点击事件
从您的JavaScript文件/内联脚本中包含以下内容：

$('#mylink').click(function(event) {

    // This will prevent the default action of the anchor
    event.preventDefault();

    // Failing the above, you could use this, however the above is recommended
    return false;

});

以上方法已在jQuery API网站中进行完整解释：http://api.jquery.com/event.preventDefault/

- James

---

有时候你希望禁用跳转并执行其他默认行为，比如将 #anchor 添加到位置而无需重新加载页面。仅使用 event.preventDefault() 是不起作用的。 - Nicholas

Answer 2

只需使用：

<a href="javascript:void(0);">Text</a>

- Nirmal

---

我将这个标记下来是因为这个：https://dev59.com/WnE95IYBdhLWcg3watM3 - matpol

event.preventDefault(); 是更好的选项。 - Cole Garstin

Answer 3

您可以使用JavaScript来防止链接的默认行为，一个简单的例子如下：

<a href="#myanchor" onclick="return false;">link</a>

- James

---

当我使用你的代码片段时，具有ID的div的位置不会改变。 - Tomkay

我标记了这个，因为内联js很可怕-在我看来。 - matpol

显然，它可以阻止跳转，但也会阻止事件的发生。 - Samuel Ramzan