브라우저의 기본 동작 막기

자동으로 실행하는 브라우저의 동작들을 자바스크립트로 다루어야 하는 경우들이 있다.

 

자동으로 실행하는 브라우저 동작

- 링크를 클릭하면, 연결된 링크의 주소로 이동

- 폼 전송을 클릭했을 때, 서버에 폼이 전송

- 마우스를 클릭한채로, 글자를 드래그하면 선택

 

위 동작들을 막기 위한 방법으로는 2가지가 있다.

 

1. event 객체 사용한다. event 객체 안에 있는 preventDefault() 메서드를 사용한다. 

2. 핸들러가 on<event>에 할당되었을 경우, return false를 반환하게 해 기본 동작을 막는다.

 

<a href="/" onclick="return false">첫번째 방식</a>
<a href="/" onclick="event.preventDefault()">두번째 방식</a>

 

위와 같이 기본동작이 막힌 경우, event 객체 안에 있는 defaultPrevented의 값은 true이다.

event.defaultPrevented 값을 사용하여, 버블링을 막는 방법 으로 사용하는 event.stopPropagation()을 용도를 대체할 수 있다.

event.stopPropagation()은 사용하는 구간을 dead zone으로 만들기 때문에, event.defaultPrevented를 활용하는 것이 좋다.

 

참고사이트

https://ko.javascript.info/default-browser-action