I know how to fire an event in JavaScript, but I don't know how to make it cancelable. via event.preventDefault() in event handler.

document.dispatchEvent(new CustomEvent("name-of-event", {}));

I have written the following code, but how is it possible in a native way, via event.preventDefault()?

document.dispatchEvent(new CustomEvent("my-event",function keepGoing(result){
  if(result){
      // continue ...
  }
}));

// And then in event listener:
document.addEventListener('my-event',function(event,keepGoing){
keepGoing(true);
// Or keepGoing(false);
});

I know how to fire an event in JavaScript, but I don't know how to make it cancelable. via event.preventDefault() in event handler.

document.dispatchEvent(new CustomEvent("name-of-event", {}));

I have written the following code, but how is it possible in a native way, via event.preventDefault()?

document.dispatchEvent(new CustomEvent("my-event",function keepGoing(result){
  if(result){
      // continue ...
  }
}));

// And then in event listener:
document.addEventListener('my-event',function(event,keepGoing){
keepGoing(true);
// Or keepGoing(false);
});

• javascript
• events

• Please create a minimal reproducible example instead of posting inplete code - Here is a jQuery way: stackoverflow./questions/2229647/… – mplungjan Commented Mar 11, 2017 at 6:48

2 Answers 2

The CustomEvent constructor takes a second options parameter, which you can use to make the event cancelable. See the article Creating and triggering events on MDN.

var event = new CustomEvent("my-event", {
  cancelable: true
})

document.addEventListener('my-event', function (event) {
   event.preventDefault()
})

console.log(
  document.dispatchEvent(event) ? 'Event was not cancelled' : 'Event was cancelled'
)

CustomEvent constructor accepts CustomEventInit as second argument. CustomEventInit is an extension of EventInit described here https://developer.mozilla/en-US/docs/Web/API/Event/Event

In the end.

document.dispatchEvent(new CustomEvent('my-event', {cancelable: true}));