javascript_preventDefault(); 브라우저 기본 기능 취소하는 법

유림·2022년 8월 16일
0

JAVASCRIPT

목록 보기
14/18
post-thumbnail

브라우저 기본 기능 취소하는 법

preventDefault();
event.preventDefault();

📍보통 원하는 이벤트의 기본 기능을 취소해버릴 때 사용하기 때문에 event.preventDefault(); 형태로 많이 사용한다.

예를 들어서 아래와 같이 작성하면 원래기능은 작동하지않게 해준다.

함수이름.addEventListener('click', (e) => {
실행할 함수;
e.preventDefault();
})




단, addEventListener에서 wheel을 통해 scroll할 때는 사용하지 않는 것을 권장한다

오류내용으로 "target이 passive일때는 작동하지 않는다"라고 나온다
그 이유로는 addEventListener의 옵션 중 passive일 경우 preventDefault가 적용되지 않기 때문이다.
꼭 사용하고 싶다면 {passive: flase}를 추가해서 사용할 수 있다

함수이름.addEventListener('click', (e) => {
실행할 함수;
e.preventDefault();
},{passive: flase})

이렇게 작성하면 scroll은 안되지만 콘솔이나 이벤트자체는 작동한다.

그러나 좋지 않은 코드이니 사용하지 않는 것을 권장한다.

profile
ɪ ʜᴏᴘᴇ ᴛᴏ sᴏʟᴠᴇ ʀᴇᴀʟ ᴘʀᴏʙʟᴇᴍs👩🏻‍💻❤️

0개의 댓글