Question

如果调度了通过CustomEvent创建的自定义事件，在监听器中取消该事件以防止事件的主要目的是什么？

例如用户单击了叠加层，然后它发出一个事件，但是必须由一些代码来决定是隐藏还是保留叠加层保持不变。

更新这是一个share-knowledge问题，我知道答案，但尝试将其传达给其他人。

Answer 1

我们需要将事件配置为cancellable

// create an event
let awesomeEvent = new CustomEvent('some_awesome_event', {
    cancelable: true
})
// emit
let isAllowed = window.dispatchEvent(awesomeEvent)

在任何事件监听器中调用preventDefault取消它。

window.addEventListener('some_awesome_event', event => {
    event.preventDefault()
})

然后可以检查事件是否已从dispatchEvent返回的结果中取消

let isAllowed = window.dispatchEvent(awesomeEvent)
if(isAllowed){
    // do some default things
}
else {
    // just an example
    console.log('Oops! The event was cancelled, nothing to do...')
}

MDN guide用于事件的创建和触发

preventDefault文档

cancellable界面文档

如何在侦听器中取消自定义JavaScript事件？

1 个答案: