javascript - stopPropagation and startPropagation - Stack Overflow

admin管理员组

文章数量:1203199

I want to make an additional click handler (client page, cant modify his js/html) and it should work like this in my script:

1) event.stopPropagation (pause client click propagation)
2) my function (do my function, when everything is done do next)
3) event.startPropagation (continue standard client action)

Right now, the first and second work. The third is the problem.
I know event.startPropagation doesn't exist, but I want something like that. Any hints?

I want to make an additional click handler (client page, cant modify his js/html) and it should work like this in my script:

1) event.stopPropagation (pause client click propagation)
2) my function (do my function, when everything is done do next)
3) event.startPropagation (continue standard client action)

Right now, the first and second work. The third is the problem.
I know event.startPropagation doesn't exist, but I want something like that. Any hints?

• javascript
• jquery
• stoppropagation

Share Improve this question Follow edited Jul 17, 2013 at 20:42 taylorc93 3,71622 gold badges2121 silver badges3434 bronze badges asked Jul 17, 2013 at 9:04 Piotr WuPiotr Wu 1,36233 gold badges1414 silver badges3131 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 10

You can re-trigger the same event object on the parent node, f.ex (jQuery). You will need to copy the event object first and pass it into the trigger in order to capture the same event properties in the bubble (f.ex e.pageX):

var copy = $.extend(true, {}, e);
setTimeout(function() {
    $(copy.target.parentNode).trigger(copy);
},500);
e.stopPropagation();

Demo: http://jsfiddle.net/GKkth/

EDIT

Based on your comment, I think you are looking for something like:

$.fn.bindFirst = function(type, handler) {
    return this.each(function() {
        var elm = this;
        var evs = $._data(this).events;
        if ( type in evs ) {
            var handlers = evs[type].map(function(ev) {
                return ev.handler;
            });
            $(elm).unbind(type).on(type, function(e) {
                handler.call(elm, e, function() {
                    handlers.forEach(function(fn) {
                        fn.call(elm);
                    });
                });
            });
        }
    });
};

This prototype allows you to bind a "premium handler" that holds a next function that will execute all previous handlers to the same element when you want to. Use it like:

$('button').click(function() {
    console.log('first');
}).click(function() {
    console.log('second');
}).bindFirst('click', function(e, next) {
    console.log('do something first');
    setTimeout(next, 1000); // holds the other handlers for 1sec
});

DEMO: http://jsfiddle.net/BGuU3/1/

Don't stop propagation in the first place.

Test if my function does what you want it to do, and then decide if you are going to stop propagation or not.

Add and remove the click handler if you want to enable/disable the click event respectively. Because event.stopPropagation() will stop the events from propagating up the dom tree.

Update:

If you are using jQuery, use .trigger() function.

http://api.jquery.com/trigger/

本文标签： javascriptstopPropagation and startPropagationStack Overflow