一尘不染

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

javascript

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

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

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


阅读 230

收藏
2020-04-25

共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()显式调用。

2020-04-25