>웹 프론트엔드 >JS 튜토리얼 >JavaScript 링크를 클릭할 때 페이지가 위로 스크롤되는 것을 방지하는 방법은 무엇입니까?

JavaScript 링크를 클릭할 때 페이지가 위로 스크롤되는 것을 방지하는 방법은 무엇입니까?

DDD
DDD원래의
2024-10-26 09:00:03364검색

 How to Prevent Page Scrolling to Top When Clicking JavaScript Links?

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

jQuery에서 이벤트에서 false를 반환합니다. 핸들러는 자동으로 event.stopPropagation() 및 event.preventDefault()를 호출합니다.

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

브라우저 호환성을 높이려면 원시 DOM 이벤트를 사용할 때 .preventDefault()를 명시적으로 호출하세요.

위 내용은 JavaScript 링크를 클릭할 때 페이지가 위로 스크롤되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.