자바스크립트로 a 태그 href 속성 비활성화 하는 방법

자바스크립트로 a 태그 href 속성 비활성화 하는 방법

반응형

자바스크립트로 a 태그의 href 속성을 비활성화 하는 방법

자바스크립트를 이용하여 a 태그의 href 속성을 비활성화하는 방법에 대해서 알아봅시다.

javascript: void(0) 사용

Document Hello world!

href 속성의 값으로 JavaScript: void(0)를 부여하면 a 태그의 기본 행위가 실행되지 않는다. a 태그의 기본 행위란 사용자가 a 태그로 감싸진 영역의 콘텐츠를 클릭하면 페이지를 전환해주는 것을 의미한다. 예제 코드를 보면 void(0)가 작성되어 있지 않은데 사실 javascript: 까지만 작성해줘도 기본 동작을 막을 수 있다.

페이지 전환 행위가 막힌 모습

이벤트 객체의 preventDefault 메서드 사용하기

이벤트 인터페이스(객체)의 preventDefault() 메서드는 엘리먼트 노드의 기본 행위를 실행하지 않도록 웹 브라우저에게 명령을 내린다. 엘리먼트 노드의 기본 행위란 앞에서 설명한 것과 같이 프로그래머가 특별히 이벤트 리스너를 바인딩 하지 않아도 실행되는 기본 동작들이다. 체크 박스를 클릭하거나 하이퍼링크 텍스트를 클릭하면 발생하는 모든 동작이 포함된다.

Document Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!

const section = document.querySelector(".section"); section.onclick = function (e) { e.preventDefault(); };

페이지 전환 행위가 막힌 모습

a 태그로 감까진 콘텐츠 영역을 클릭하면 페이지 이동이 되는 것이 기본 동작이다. 하지만 부모 div 요소의 클릭 이벤트를 preventDefault() 메서드로 막아놨기 때문에 자식 요소(a태그)의 클릭 이벤트의 기본 동작도 막힌 모습니다.

반응형

from http://tamagotch.tistory.com/42 by ccl(A) rewrite - 2021-12-26 09:01:05