event.cancelable

Event 实例的只读属性 cancelable 表明该事件是否可以被取消,当事件被阻止之后,该事件就好像没有被触发一样。如果事件不能被取消,则其 cancelable 属性的值为 false,且事件发生时无法在事件监听回调中停止事件。

在许多事件的监听回调中调用preventDefault()前,都需要检查 cancelable 属性的值。

大部分由用户与页面交互产生的原生浏览器事件都可以被取消。取消clickscrollbeforeunload 事件将分别阻止用户点击某些元素,滚动页面或跳离页面。

使用其它 JavaScript 代码创建的 Custom events ,可以在初始化事件的时候控制该事件是否可以被取消。

语法

bool = event.cancelable;

返回结果为 Boolean,如果事件可以被取消将返回 true。

示例

例如,浏览器厂商提议 wheel 事件只能在事件监听回调第一次执行时被取消,接下来的 wheel 事件都不能被取消。

function preventScrollWheel(event) {
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    // The event can be canceled, so we do so.
    event.preventDefault();
  } else {
    // The event cannot be canceled, so it is not safe
    // to call preventDefault() on it.
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener('wheel', preventScrollWheel);

备注

事件能否被取消取决于该事件初始化时的状态。

要取消一个事件的默认行为,可以调用该事件的 preventDefault()方法。与该事件关联的默认行为仍将会保留。

规范

规范 状态 备注
DOM
Event.cancelable
Living Standard
Document Object Model (DOM) Level 2 Events Specification
Event.cancelable
Obsolete Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
cancelableChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown