How to stop propagating from event handler in JavaScript?

Question

I have a button that triggers an event on a click. Then I have a subscriber to that event. Inside the subscriber's event handler if certain condition is true then I want to stop processing everything inside button's click event.

I tried calling e.preventDefault(), e.stopPropagation() and e.stopImmediatePropagation() but nothing works.

$("#btn").click(function() {
  // trigger event
  console.log("triggering event");

  $(document).trigger("response.beforeSave");

  //I want to stop processing after this when subscriber invokes preventDefault() or 
  //stopPropagation()

  console.log("after trigger. This should not get invoked.");
})

$(document).off("response.beforeSave").on("response.beforeSave", function(e) {
  console.log("start subscriber");

  if (true) // if condition is true
  {
    //e.preventDefault();
    //e.stopPropagation();
    e.stopImmediatePropagation();
    return;
  }

  console.log("exit subscriber. This should not get invoked.");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="button">Click Me</button>

the only way to stop the execution of a function (which your click handler is), is to return from it. — thedude
– thedude, Commented Sep 1, 2021 at 15:55
Document already responded to that custom "response.beforeSave" event - makes no sense to stop propagation. Usually stopping an event propagation is a bad idea. Every part of an application should always be notified of occurring events. Or I'm not sure what you're trying to accomplish...?! — Roko C. Buljan
– Roko C. Buljan, Commented Sep 1, 2021 at 15:55
The seems like it could be solved by utilising better code structure, instead of preventDefault()/stopPropagation()/a variable to control external function flow. — Rory McCrossan
– Rory McCrossan, Commented Sep 1, 2021 at 15:56
You want to know if an event you triggered got cancelled? You probably want to rethink how you are coding this. That is an odd pattern. — epascarello
– epascarello, Commented Sep 1, 2021 at 15:56

fdomn-m · Accepted Answer · 2021-09-01 17:30:30Z

1

You should create your own Event Object and pass that to the .trigger rather than a string with the event name.

This will allow you to check what happened to the event.

An example exists on the jQuery trigger page

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

Here's your code updated to match:

$("#btn").click(function(e) {
  // trigger event
  console.log("triggering event");

  // create a new event object 
  var beforeSaveEvent = jQuery.Event("response.beforeSave");
  $(document).trigger(beforeSaveEvent);
  
  if (beforeSaveEvent.isImmediatePropagationStopped()) {
    console.log("event stopped");
    
    // can also check beforeSaveEvent.isDefaultPrevented
    // can also check beforeSaveEvent.isPropagationStopped
    
    // e is the click event - function(e) above
    // could also use `event` here
    // "cancel" the click event    
    e.stopPropagation();
    return;
  }

  console.log("after trigger. This should not get invoked.");
})

$(document).off("response.beforeSave").on("response.beforeSave", function(e) {
  console.log("start subscriber");

  if (true) // if condition is true
  {
    // whichever is used, check the equivalent event.isXXX
    //e.preventDefault();
    //e.stopPropagation();
    e.stopImmediatePropagation();
    return;
  }

  console.log("exit subscriber. This should not get invoked.");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="button">Click Me</button>

edited Sep 1, 2021 at 17:30

answered Sep 1, 2021 at 16:18

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LP13 Over a year ago

Its worked. However we have to use isImmediatePropagationStopped as function not property if (beforeSaveEvent.isImmediatePropagationStopped())

Roko C. Buljan · Accepted Answer · 2021-09-01 16:43:36Z

1

To put it simple, here's a suggestion by passing arbitrary data (a boolean in your case) via the second parameter of .trigger("EventNamespace", [])

$("#btn").on("click", function(evt) { 
  const canSave = document.querySelector("[name=canSave]").checked;
  $(document).trigger("response.beforeSave", [{canSave}]);

  console.log(`Handler before: canSave is ${canSave}`);
  if (!canSave) return;
  console.log(`Handler after`);
});

$(document).on("response.beforeSave", function(evt, data) {
  if (!data.canSave) return;
  console.log(`Subscriber: canSave is ${data.canSave}`);
});

<label><input type="checkbox" name="canSave"> toggle "canSave"</label><br>
<button id="btn" type="button">Click Me</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

PS: place $(document).trigger before (like in the example) or after the if(canSave) statement - depending on what you need.

edited Sep 1, 2021 at 16:43

answered Sep 1, 2021 at 16:37

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

LP13 Over a year ago

I ended up passing the arbitrary data. But I attached the data to event

var beforeSaveEvent = jQuery.Event("response.beforeSave");         beforeSaveEvent.canSave = true;         $(document).trigger(beforeSaveEvent);

and then in handler set evt.canSave = false

Roko C. Buljan Over a year ago

@LP13 yes, that's exactly what you can do by passing data around via that param. Preventing, stopping propagations is almost never a good pattern approach. I really advice for the above solution.

Collectives™ on Stack Overflow

How to stop propagating from event handler in JavaScript?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related