Event.cancelable

Event 인터페이스의 cancelable 읽기 전용 속성은 이벤트의 취소가 가능한지를 나타냅니다.

이벤트가 취소 불가능한 경우, 해당 이벤트의 cancelable 속성은 false이며 수신기에서 이벤트의 발생을 멈출 수 없습니다.

취소 가능한 브라우저 내장 이벤트는 대부분 사용자가 페이지와 상호작용해서 발생하는 이벤트입니다. 예컨대 click, wheel, beforeunload 이벤트를 취소하게 되면, 각각 사용자가 어떤 요소를 클릭하는 것, 페이지를 스크롤하는 것, 페이지에서 나가는 것을 막게 됩니다.

사용자 JavaScript 코드에서 생성하는 합성 이벤트의 경우, 이벤트를 초기화할 때 취소 가능 여부를 지정할 수 있습니다.

이벤트를 취소하려면 이벤트의 preventDefault() 메서드를 호출하세요. 해당 이벤트에 대한 기본 동작을 실행하지 않게 됩니다.

다양한 종류의 이벤트를 처리해야 하는 처리기의 경우 preventDefault()를 호출하기 전에 먼저 cancelable 속성의 값을 검사해야 할 수 있습니다.

이벤트를 취소할 수 있으면 true.

예제

브라우저 제공자들은 wheel 이벤트를 최초 수신 시점에만 취소할 수 있도록 제안하고 있습니다. 즉, 두 번째 wheel 이벤트부터는 취소할 수 없습니다.

js
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);

명세

Specification
DOM Standard
# ref-for-dom-event-cancelable②

브라우저 호환성

BCD tables only load in the browser