当我有一个链接到jQuery或JavaScript事件的链接时,例如:
<a href="#">My Link</a>
如何防止页面滚动到顶部?当我从锚点移除href属性时,页面不会滚动到顶部,但链接似乎不可点击。
您需要防止发生click事件的默认操作(即,导航到链接目标)。
有两种方法可以做到这一点。
event.preventDefault()
调用.preventDefault()传递给处理程序的事件对象的方法。如果您使用jQuery绑定处理程序,则该事件将是的实例,jQuery.Event并且将是的jQuery版本.preventDefault()。如果您addEventListener用于绑定处理程序,它将是Event和的原始DOM版本.preventDefault()。两种方式都可以满足您的需求。
.preventDefault()
jQuery.Event
addEventListener
Event
例子:
$('#ma_link').click(function($e) { $e.preventDefault(); doSomething(); }); document.getElementById('#ma_link').addEventListener('click', function (e) { e.preventDefault(); doSomething(); })
return false;
在jQuery中:
从事件处理程序返回false将自动调用event.stopPropagation()和event.preventDefault()
因此,使用jQuery,您可以选择使用这种方法来防止默认链接行为:
$('#ma_link').click(function(e) { doSomething(); return false; });
如果您使用的是原始DOM事件,那么这也将在现代浏览器中起作用,因为HTML 5规范规定了这种行为。但是,该规范的较旧版本却没有,因此,如果需要与较旧浏览器的最大兼容性,则应.preventDefault()显式调用。