stopPropagation breaks event handler

Question

I have a bit of a head scratcher when it comes to using stopPropagation in javascript. According to many different sources stopPropagation should stop bubbling of the event to parent elements, however, when I use it it seems to stop the event from being called after the first click. I have worked up a very simple bit of code to reproduce the behaviour below:

HTML:

<div id="root">
    <div id="top">
         <h1>Click Me!</h1>

    </div>
</div>

js/jQuery:

var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);

$("#root").on('boop', function (e) {
    alert("root boop!");
});

$("#top").on('boop', function (e) {
    // After this is called, this event handler will never fire again.
    e.stopPropagation();
    alert("top boop!");
});

$("h1").click(function (e) {
    $("#top").get(0).dispatchEvent(myEvent);
    // I know that $("#top").trigger will prevent the problem, what is wrong with the form above?

});

There is a Fiddle as well.

I don't understand what you are asking? In the fiddle, there's no problem...? — Karl-André Gagnon, Aug 18 '14 at 19:27
@Karl-AndréGagnon Really? So every time you click you get the alert box? — A.R., Aug 19 '14 at 14:56
You didn't specified that in your question, so yeah, I did not click more than once. After reading the current answer, I do now understand the problem. Next time, explain how to reproduce the problem ;) — Karl-André Gagnon, Aug 19 '14 at 14:59
@Karl-AndréGagnon From the question: '...however, when I use it it seems to stop the event from being called...' There is a comment in the code that spells it out as well. Next time, read the question ;) — A.R., Aug 19 '14 at 16:56

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

You dispatch myEvent on which you eventually call .stopPropagation(). Every click thereafter use the same instance of myEvent on which the propagation has been stopped.

You'll need to make a copy of the event before dispatching it if you want to be able to click multiple times.

...or you could rewrite your JavaScript like this:

$("#root").on('boop', function (e) {
  alert("root boop!");
});

$("#top").on('boop', function (e) {
  e.stopPropagation();
  alert("top boop!");
});

$("h1").click(function (e) {
  var myEvent = document.createEvent("Event");
  myEvent.initEvent("boop", true, true);
  $("#top").get(0).dispatchEvent(myEvent);
});

Working JS Fiddle

edited May 23 '17 at 12:05

Community

1
1

answered Aug 18 '14 at 19:35

mbillard

38,386
18
74
98

and how would one copy such an event? – A.R. Aug 18 '14 at 19:44
1

Your answer explained me what the question was! You definitely deserve an upvote – Karl-André Gagnon Aug 18 '14 at 19:45
1

just move the createEvent stuff into the click handler. – dandavis Aug 18 '14 at 19:59
@A.R. this question deals with cloning event objects: http://stackoverflow.com/q/12593035/810 – mbillard Aug 19 '14 at 13:10
or do as @dandavis suggests – mbillard Aug 19 '14 at 13:11
OK, well I'm just going to take everyone's suggestions, etc. and place them into my own answer. You know, so other users don't have to read all of the comments to figure out what is going on. – A.R. Aug 19 '14 at 14:57
What's missing from my answer? I mentioned that you had to make a copy of the event. Feel free to edit it and add the implementation of the copy but this is a different issue. – mbillard Aug 20 '14 at 17:48
It ins't clear for noobs (like myself) as to how one might go copying an event. It's great that you know how to do it, but it kind of leaves your answer incomplete. – A.R. Aug 21 '14 at 11:50

stopPropagation breaks event handler

1 Answers1