Trigger event only if not prevented by any handler?

Question

I currently have a JavaScript component which triggers a DOM event using JQuery like so:

$(document).trigger('myevent', mydata);

Other components register an event handler and update themselves accordingly when receiving the event.

Now, I want to extend this functionality in such a way, that any of the registered components should have the chance to prevent those updates (i.e., reject the event).

I thought of having two events instead:

$(document).trigger('myevent-before', mydata);
if( ??? )
    $(document).trigger('myevent', mydata);

Components which like to reject the update would register for the myevent-before and return some kind of information in order to prevent the triggering side from triggering the actual myevent.

Is this the way to go?

• If yes, how to formulate the if clause? Does trigger() return some indicator if any of the called event handlers returned false?
• If no, what's the way to do such a thing in JavaScript?

---

Example 1:

1. Main Component: Hey, does anyone have a problem with an upcoming update?
2. Component A: No.
3. Component B: No.
4. Main Component: OK, then I'll trigger the actual update!

Example 2:

1. Main Component: Hey, does anyone have a problem with an upcoming update?
2. Component A: No.
3. Component B: Yes.
4. Main Component: Oh, ok, no update it is.

(note that there might be more than 2 components registered of course)

Answer 1

It is possible to do this with plain Javascript. Not sure if it's possible with jQuery as well.

var input = document.getElementById( 'input' );
var makered = document.getElementById( 'makered' );

makered.addEventListener( 'click', function( e ) {
  var beforeMakeRedEvent = new Event( 'before-make-red', { cancelable: true } );
  input.dispatchEvent( beforeMakeRedEvent );
  if( beforeMakeRedEvent.defaultPrevented ) {
    console.log( 'Sorry, unable to make it red!' );
  }
  else {
    console.log( 'Making it red! Yeeehaawww!' );
  }
} );

input.addEventListener( 'before-make-red', function( e) {
  if( this.value == 1 ) {
    e.preventDefault();  
  }
} );

<input id="input" value="5">
<button id="makered">Make red</button>

Here's the above example translated to jQuery:

$( '#makered' ).on( 'click', function( e ) {
  var beforeMakeRedEvent = jQuery.Event( 'before-make-red' );
  $( '#input' ).trigger( beforeMakeRedEvent );
  if( beforeMakeRedEvent.isDefaultPrevented() ) {
    console.log( 'Sorry, unable to make it red!' );
  }
  else {
    console.log( 'Making it red! Yeeehaawww!' );
  }
} );

$( '#input' ).on( 'before-make-red', function( e ) {
  if( this.value == 1 ) {
    e.preventDefault();
  }
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="input" value="5">
<button id="makered">Make red</button>

Let's say, for the sake of argument, that you wanted to pass information about why some component wants to prevent a default action of an event. Then you could implement it like this. Whichever component is served first will immediately stop further propagation of the event, preventing other handlers from overwriting the additional information (I could think of a more robust system, but this is just an example of possibilities):

/* main.js */
$( '#makered' ).on( 'click', function( e ) {
  var beforeMakeRedEvent = jQuery.Event( 'before-make-red' );
  $( '#input' ).trigger( beforeMakeRedEvent );
  if( beforeMakeRedEvent.isDefaultPrevented() ) {
    // include the reason it was prevented
    console.log( 'Sorry, unable to make it red!', beforeMakeRedEvent.preventReason );
  }
  else {
    console.log( 'Making it red! Yeeehaawww!' );
  }
} );

/* component1.js */
$( '#input' ).on( 'before-make-red', function( e ) {
  if( this.value == 1 ) {
    e.preventDefault();
    
    // this is just a custom ad hoc property
    e.preventReason = 'I don\'t like the number 1!';
    
    // If I prevented it first, stop further propagation
    // to prevent others from fiddling with the event
    
    // try to leave this out, to see what happens
    e.stopImmediatePropagation();
  }
} );

/* component2.js */
$( '#input' ).on( 'before-make-red', function( e ) {
  if( this.value == 1 ) {
    e.preventDefault();
    
    // this is just a custom ad hoc property
    e.preventReason = 'I don\'t like the number 1 either!';
    
    // If I prevented it first, stop further propagation
    // to prevent others from fiddling with the event
    
    // leaving this out won't do much in this example
    e.stopImmediatePropagation();
  }
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="input" value="5">
<button id="makered">Make red</button>

Answer 2

I think that the question should be described upside down: component A and component B might tell Main component what are their particular state regarding updates (true if updates can be done, false otherwise). This can be controlled via events or methods exposed by Main component to hold their individual state, and components A and B can call these methods to set their particular state to false when they fall into a specific condition (one that prevents them to be updated) and reset that status to true after this preventing condition has ended.

So, when a new updating cycle starts at Main component, the first thing it has to do is to iterate on the status array to check if some of the components status is set to false. If this is the case, the update stops. If all components status are set to true, update goes on.

Answer 3

Update 2: Used JQuery-based solution of @DecentDabbler, which is more idiomatic.

---

Update 1: .trigger() is synchronous, no need for .when(). A short and simple way is:

// main.js:
var maySend = true;
var prevent = function() { maySend = false; };
$(document).trigger('myevent-before', [prevent]);
if(maySend) {
    $(document).trigger('myevent');
}

// component.js:
$(document).on('myevent-before', function(e, prevent) {
    if(some_condition) {
        prevent();
    }
});

---

Old solution using .when():

After searching the web for many hours, I've found a solution based upon JQuery's .when() method:

// main.js:
var maySend = true;
var prevent = function() { maySend = false; };
$.when($(document).trigger('myevent-before', [prevent])).done(function(){
    if(maySend) {
        $(document).trigger('myevent');
    }
});

// component.js:
$(document).on('myevent-before', function(e, prevent) {
    if(some_condition) {
        prevent();
    }
});