单击触发JavaScript的链接时，如何阻止网页滚动到顶部？

Question

当我有一个链接到jQuery或JavaScript事件的链接时，例如：

<a href="#">My Link</a>

如何防止页面滚动到顶部？当我从锚点移除href属性时，页面不会滚动到顶部，但链接似乎不可点击。

Answer 1

您需要防止发生click事件的默认操作（即，导航到链接目标）。

有两种方法可以做到这一点。

选项1： event.preventDefault()

调用.preventDefault()传递给处理程序的事件对象的方法。如果您使用jQuery绑定处理程序，则该事件将是的实例，jQuery.Event并且将是的jQuery版本.preventDefault()。如果您addEventListener用于绑定处理程序，它将是Event和的原始DOM版本.preventDefault()。两种方式都可以满足您的需求。

例子：

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

选项2： return false;

在jQuery中：

从事件处理程序返回false将自动调用event.stopPropagation（）和event.preventDefault（）

因此，使用jQuery，您可以选择使用这种方法来防止默认链接行为：

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

如果您使用的是原始DOM事件，那么这也将在现代浏览器中起作用，因为HTML
5规范规定了这种行为。但是，该规范的较旧版本却没有，因此，如果需要与较旧浏览器的最大兼容性，则应.preventDefault()显式调用。