jquery - Javascript pause event propagation - Stack Overflow

admin管理员组

文章数量:1341413

I need to be able to chain click events, and temporarily pause event propagation between them.

So, for a given element, it runs three different click events, but the second one needs user input, so it pauses propagation while the user fills in the form and then continues.

clickAction2 = ->
  #Pause event propagation
  somehow.pauseEventPropegationRightHere()

  #Go and handle the dialogs, user input, JS requests
  goDoSomething().thenDoCallback( ->
     #User is now authenticated pletely.
     somehow.continueEventPropegationAsIfNothingHappened()
  )

In an effort to allow single responsibility, and events chained higher/lower shouldn't have knowledge that the event propagation was paused and nothing should be called twice.

No, the three click events can't be called sequentially from another function or any similar primitive solution.

This is in relation to AngularJS directives, but the solution does not need to rely on it.

There is a similar question but none of the answers are satisfactory: How to continue event propagation after cancelling?.

Edit:

What I need is a cleaner way to call e.stopImmediatePropagation(), and then continue from that point. As of right now, my best option is by manually entering the jQuery "private' data[1] and calling the functions manually.

1. $._data( $(element)[0], 'events' ).click[].handler()

I need to be able to chain click events, and temporarily pause event propagation between them.

So, for a given element, it runs three different click events, but the second one needs user input, so it pauses propagation while the user fills in the form and then continues.

clickAction2 = ->
  #Pause event propagation
  somehow.pauseEventPropegationRightHere()

  #Go and handle the dialogs, user input, JS requests
  goDoSomething().thenDoCallback( ->
     #User is now authenticated pletely.
     somehow.continueEventPropegationAsIfNothingHappened()
  )

In an effort to allow single responsibility, and events chained higher/lower shouldn't have knowledge that the event propagation was paused and nothing should be called twice.

No, the three click events can't be called sequentially from another function or any similar primitive solution.

This is in relation to AngularJS directives, but the solution does not need to rely on it.

There is a similar question but none of the answers are satisfactory: How to continue event propagation after cancelling?.

Edit:

What I need is a cleaner way to call e.stopImmediatePropagation(), and then continue from that point. As of right now, my best option is by manually entering the jQuery "private' data[1] and calling the functions manually.

1. $._data( $(element)[0], 'events' ).click[].handler()

• javascript
• jquery
• events

Share Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge asked Jan 10, 2014 at 12:06 Aaron ButacovAaron Butacov 34.5k88 gold badges4848 silver badges6262 bronze badges 4

• Can you guarantee that the special event you are binding that causes the delay is the first bound click event? Causing bubble to pickup where it left off in the middle of a list of events on the same element will be more difficult than simply causing all events on the current element to happen again with a special flag to stop the special event from being handled that one time. – Kevin B Commented May 8, 2014 at 21:27
• No. It might be the second one. – Aaron Butacov Commented May 10, 2014 at 12:12
• possible duplicate of Javascript: cancel or let an event continue? – Howli Commented May 18, 2014 at 23:16
• @Howlin, no, this question was asked 4 months earlier and this is pausing and continuing events on a single element not preventing bubbling up to parent elements. – Aaron Butacov Commented May 20, 2014 at 14:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I had a similar issue myself and I hope my solution is satisfactory because I realize it may not directly apply to your situation. However hopefully the principle I show here helps you find a solution of your own.

The problem (if I understand correctly) is that you need a way to prevent a child element from triggering an event if a parent element has triggered the same event at essentially the same time. Whereas e.stopImmediatePropagation() prevents event bubbling, effectively halting any parent elements from triggering the event. I believe the solution is using a setTimeout() with a zero millisecond delay to perform the desired function and if the triggering event ever occurs again while the setTimeout() is in use, use clearTimeout() to stop the previous event from occuring. The best way I can demonstrate this approach is by creating a parent and child element and watching the mouseleave event.

Here is the JS/jQuery:

var timerActive = false;
$('#div1, #div2').mouseleave(function(e) {
    var trigger = $(this).attr('id'); // for monitoring which element triggered the event
    if (timerActive) {
        clearTimeout(announce); // stops the previous event from performing the function
    }
    window.announce = setTimeout(function() {
        alert('mouse exited'+trigger); // trigger could be use in an if/else to perform unique tasks
        timerActive = false;
    },0);
    timerActive = true;
});

Here is a JSFiddle demo: http://jsfiddle/XsLWE/

Since the events are triggered sequentially from child to parent, clearing each previous timeout effectively waits for the last or top-most element to trigger the event. At which point you could use an IF/ELSE statement to perform desired tasks. Or perform one function then a callback on plete.

In the demo, the effect is that on the left and bottom edges of the div elements, each div element is allowed to trigger the event individually. However on the top and right edges of div2, the only element allowed to trigger the event is div1.

Again, from your original post, I take it you are after something slightly different. But perhaps this approach will help you in some way.

Try something like

elem.on('event',function(e) {
    e.stopPropagation();

    goDoSomething(function(){
        elem.parent().trigger(e);
    });
});

goDoSomething() could do an AJAX call or something else async, and then for whatever reason call the callback to have the event propagation continue

本文标签： jqueryJavascript pause event propagationStack Overflow