[jQuery] 기본 이벤트 제거 event.preventDefault()

 

모든 객체가 기본행동을 가지고 있는 건 아니기 때문에 우선 기본행동이 있는지 먼저 확인을 해보자

cancelable 프로퍼티 값을 확인하면 기본 이벤트가 있는지 확인할 수 있다.

 

기본이벤트 확인

event.cancelable

event.cancelable가 true인 경우 이벤트를 취소할 수 있다.

 

기본 이벤트 제거

event.preventDefault()

 

아래 링크에서 기본행동관련 속성을 확인할 수 있다.

https://www.w3.org/TR/DOM-Level-3-Events/#event-flow-default-cancel

UI Events

 

 

function preventScrollWheel(event) {
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    // 이벤트를 취소할 수 있으므로 취소함
    event.preventDefault();
  } else {
    // 이벤트를 취소할 수 없음
    // preventDefault() 호출이 안전하지 않음
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener('wheel', preventScrollWheel);

 

 

a링크의 기본 이벤트 제거하기

<script>
    $("#link").on("click",function(e){
        alert("클릭");
        // 기본 행동 취소
        e.preventDefault();
    })
</script>

<a href="https://moo-you.tistory.com/" id="link">go</a>

 

go버튼을 클릭해도 얼럿창만 나타날 뿐 링크로 이동되지 않는다.

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/API/Event/cancelable