JavaScript로 링크 클릭 시 페이지 스크롤을 방지하는 방법은 무엇입니까?

JavaScript로 링크 클릭 시 페이지 스크롤 방지

링크 동작을 향상하기 위해 JavaScript 또는 jQuery를 사용할 때 클릭이 발생하는 문제가 일반적으로 발생합니다. 링크는 페이지를 맨 위로 스크롤하도록 트리거합니다. 이 동작을 방지하려면 몇 가지 옵션이 있습니다.

먼저 event.preventDefault() 메서드를 고려하세요. 핸들러에 전달된 이벤트 객체에 대해 이 메서드를 호출하면 기본 작업(예: 링크 대상으로 이동)이 효과적으로 비활성화됩니다. 이는 DOM에서 jQuery의 $e.preventDefault() 또는 기본 Event.preventDefault()를 사용하든 상관없이 작동합니다.

예를 들어 다음 jQuery 코드는 스크롤을 방지합니다.

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

또 다른 옵션은 jQuery의 return false를 활용하는 것입니다. 행동. 이벤트 핸들러에서 false를 반환하면 event.stopPropagation()과 event.preventDefault()가 모두 자동으로 호출됩니다. 따라서 다음 접근 방식을 사용할 수 있습니다.

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

또한 원시 DOM 이벤트를 선호하는 경우 최신 브라우저에서 false를 반환하면 기본 링크 동작이 방지됩니다. 그러나 HTML5 사양에는 초기에 이 동작이 포함되지 않았으므로 이전 브라우저와의 최대 호환성을 위해 .preventDefault()를 명시적으로 호출하는 것이 좋습니다.

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