如何取消侦听器中的自定义 javascript 事件？

Question

If a custom event created via CustomEvent is dispatched, what is the method to cancel it in listeners to prevent event's main purpose?

Eg An overlay is clicked by a user, then it emits an event, but it must be up to some code to decide if to hide the overlay or leave it untouched.

UPDATE It's a share-knowledge question, I know the answer but try to impart it to the others.

Answer 1

We need to configure the event as cancellable

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

Call preventDefault inside any event listener to cancel it.

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

Then it is possible to check whether the event was cancelled with the result returned from 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 for events creation and triggering

preventDefault documentation

cancellable interface docs