如何防止單擊 JavaScript 連結時不必要的頁面滾動？

防止JavaScript 連結點擊時頁面捲動

當您的網頁包含觸發JavaScript 事件但也會導航到新頁面的連結時，您可能會遇到不必要的副作用：頁面捲動到頂部。此行為可能會中斷使用者流程並破壞網站的預期功能。

要防止這種捲動行為，您需要停用與連結點擊關聯的預設操作，即重定向到目標 URL。以下是實現此目的的兩種有效方法：

選項1：event.preventDefault()

此方法可讓您透過呼叫.preventDefault 明確封鎖預設操作傳遞給事件處理程序的事件物件的() 方法。

• jQuery:

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

  登入後複製

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

  登入後複製
選項2：返回false;

在jQuery 中，從事件處理程序將自動呼叫.stopPropagation() 和.preventDefault()方法。這提供了另一種方法來防止預設連結行為：

如果您使用原始DOM 事件（不是jQuery），則返回false 也適用於現代瀏覽器，但為了與舊瀏覽器最大程度相容，建議明確呼叫.preventDefault().

以上是如何防止單擊 JavaScript 連結時不必要的頁面滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！