15

With object.stopPropagation() I can stop event bubbling but how can I re-enable it?

Is there a pre defined function in js something like object.startPropagation?

EDIT:

The Problem is that the JS remembers if you click on the "object" than stop Event Bubbling always even after I don't want it, so I would like to stop it:

document.getElementById("object").onclick = function(e){
    if(e && e.stopPropagation) {
        e.stopPropagation();
    } else {
          e = window.event;
          e.cancelBubble = true;
    }
}
Adam Halasz
  • 57,421
  • 66
  • 149
  • 213
  • Can you add some more information, i.e. what are you trying to achieve. I can't see a need to ever need to start it if you've called stop. – djdd87 Jan 19 '11 at 12:12
  • When you say "even after I don't want it", under what circumstances do you not want it? You need to set up some variable to represent those circumstances, then check that variable in the handler. It would be helpful if you actually posted your code instead of opting for another solution. – Kelvin Jul 31 '13 at 20:31

1 Answers1

27

It doesn't remember the value at all. The event e is new each time onclick is fired. The problem is you're always cancelling the event bubbling:

if(foo) {
    e.stopPropagation();
} else {
    e.cancelBubble = true;
}
  • e.stopPropagation is the W3C method of preventing event bubbling.
  • e.cancelBubble is the Microsoft method to prevent event bubbling.

They're both the same. So you're cancelling bubbling of events every time. More reading here.

You'll need to change your method so that it only cancels bubbling if your criteria are met:

document.getElementById("object").onclick = function(e) {

    if(e && e.stopPropagation && someCriteriaToStopBubbling === true) 
    {
        e.stopPropagation();
    } 
    else if (someCriteriaToStopBubbling === true)
    {
          e = window.event;
          e.cancelBubble = true;
    }
}

UPDATE: Bear in mind that in your current code, if (e && e.stopPropagation) will always be true if the browser supports stopPropagation. If it goes into the second brace for cancelBubble, it will not remember the value last set. See this fiddle.

Basically, to summarise, in your code you're cancelling propagation every time after every click. You have to put some criteria into the function to determine whether or not to cancel the propagation up the element hierarchy.

djdd87
  • 67,346
  • 27
  • 156
  • 195
  • I tested it and remembers, The event bubble canceling is inside a function what is fired by another event. And when I click on the other object the event bubbling is still canceled and I also put an alert inside of the function and works because it remembers that if you click on "object" than start the function, but I didn't started the parent function of the event bubbling function, maybe I don't understand something but this is what I experience here :). But your solution is correct I can put some IF ELSE statements there and I hope it will work :) – Adam Halasz Jan 19 '11 at 12:38
  • @CIRK - You're doing something wrong, because it does **not** remember, unless you're doing some code other to what you've provided. See here: http://jsfiddle.net/DgwSA/. Every time you click the button in that example cancelBubble will always be false. I've added an update to try and make your mistakes more obvious to you. – djdd87 Jan 19 '11 at 12:54
  • Check this out -> http://jsfiddle.net/DgwSA/1/ The onclick is changed and the cancel bubble too, however if you alert e.cancelbubble will give you false, but in my project stopped the event handling too. – Adam Halasz Jan 19 '11 at 13:14
  • With my last question I solved the problem by changing the `onclick funtion` to something else, but thanks very much for your answer, you should be true, because it's logical what you say but something is wrong here :D – Adam Halasz Jan 19 '11 at 13:18
  • @GenericTypeTea It does appear to remember the e.stopPropagation setting, irrespective if the event is different each time. – LaserBeak Jun 02 '12 at 03:53