如何防止点击 JavaScript 链接时页面滚动到顶部？

单击 JavaScript 触发的链接时防止页面滚动到顶部

单击与 JavaScript 事件关联的链接时，例如：

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

页面可能会意外滚动到顶部。要在保持链接功能的同时防止此行为，请考虑以下解决方案：

选项 1：event.preventDefault()

利用事件对象的 .preventDefault() 方法防止浏览器执行导航到链接的默认操作。

<code class="javascript">$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

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

选项 2：返回 false;

在 jQuery 中，从事件返回 false handler 自动调用 event.stopPropagation() 和 event.preventDefault()。

<code class="javascript">$('#ma_link').click(function(e) {
     doSomething();
     return false;
});</code>

为了获得更多浏览器兼容性，请在使用原始 DOM 事件时显式调用 .preventDefault()。

以上是如何防止点击 JavaScript 链接时页面滚动到顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！