如何防止单击 JavaScript 链接时不必要的页面滚动？

防止 JavaScript 链接点击时页面滚动

当您的网页包含触发 JavaScript 事件但也会导航到新页面的链接时，您可能会遇到不需要的副作用：页面滚动到顶部。此行为可能会中断用户流并破坏网站的预期功能。

要防止这种滚动行为，您需要禁用与链接点击关联的默认操作，即重定向到目标 URL。以下是实现此目的的两种有效方法：

选项 1：event.preventDefault()

此方法允许您通过调用 .preventDefault 显式阻止默认操作传递给事件处理程序的事件对象的 () 方法。

• jQuery:

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

  登录后复制

• addEventListener (原始 DOM):

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

  登录后复制

选项 2：返回 false;

在 jQuery 中，从事件处理程序将自动调用 .stopPropagation() 和 .preventDefault() 方法。这提供了另一种方法来防止默认链接行为：

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

如果您使用原始 DOM 事件（不是 jQuery），返回 false 也适用于现代浏览器，但为了与旧浏览器最大程度兼容，建议显式调用 .preventDefault().

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