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: return false;

jQuery에서 false를 반환 이벤트 핸들러는 .stopPropagation() 및 .preventDefault() 메소드를 모두 자동으로 호출합니다. 이는 기본 링크 동작을 방지하는 대체 방법을 제공합니다.

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

원시 DOM 이벤트(jQuery가 아님)를 사용하는 경우 false를 반환하면 최신 브라우저에서도 작동하지만 이전 브라우저와의 최대 호환성을 위해 .preventDefault()를 명시적으로 호출하는 것이 좋습니다.

위 내용은 JavaScript 링크를 클릭할 때 원하지 않는 페이지 스크롤을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!