How do I stop a event propagation?

Question

I understand I need to use the stopPropigation, but how do I get a reference to the event from an onClick function. And Also how do I find out how an event was attached to the element. So I have a simple button like this:

<button class="btn btn-default" onclick="addRoleToReportClicked()">

the function looks like this:

function addRoleToReportClicked() {
    $('#addRoleDiv').show();
}

So Simple. And was working fine. Unitl I just did an update of code from work. Now it does show the div, but then proceeds to do other stuff, namely re-load the whole page.

I am using firefox and I see that the button now has a "bubbling" and "DOM0" event handlers. I would love to know how that got there, but more importantly 2 questions:

1. How do I stop this in the addRoleToReportClicked() function? (I assume that I can stopPropogation, but how do I get a handle to the event?

2. Is there any easy way to find what code is adding these event listeners? I tried the debug, but that did not show me anything. I don't want to go through 20+ js files and thousands of lines of code to find it. But I do want to hunt down the developer and shoot him.

UPDATE

I tried this:

    $("#addRoleDivButton").unbind("click").on("click", function(e){
      e.cancelBubble = true;
      e.stopPropagation();
      e.bubbles = false;
      $('#addRoleDiv').show();
    });

None of it worked. Taking the idea of a form submition, I noticed that all the other buttons on the page were working fine, but this one was inside a from. So I changed the tag from a "button" to an "a" and it works fine. Someone attached a submit() to every button inside a form tag. How do I stop a submit?

Answer 1

There are a bunch of ways you can stop bubbling, the most popular two ways are -

stop the propagation -

function addRoleToReportClicked(e) {
    e.stopPropagation();
    $('#addRoleDiv').show();
}

or, unbind the other handlers -

<button class="btn btn-default btn-1">

$(".btn-1").unbind("click").on("click", function(){
    $('#addRoleDiv').show();
});

Answer 2

1) the event is passed as argument to the callback function

function addRoleToReportClicked(event) {
    event.stopPropagation();
    $('#addRoleDiv').show();
}

stopPropagation() will prevent the event from trigger callbacks on parent elements.

You may want to use stopImmediatePropagation() in some cases: I leave to you to look for the difference

jquery: stopPropagation vs stopImmediatePropagation

Note that you may also/instead want to prevent the browser to execute its default actions: (for example a click on a link would also open the link, a click on a submit button would send the form).

In that case you have event.preventDefafult()

EDIT:

Note that if addRoleToReportClicked is invoked because you have

<button class="btn btn-default" onclick="addRoleToReportClicked()">

Then the event object is not passed to the function

You may remove the onclick attribute.

Then if you need to catch the click on the button use Jquery's on('click')

---

2) Google Chrome (Dev Tools) tells you what event listeners are attached to an element (just right-click and inspect the element).

AFAIK it doesn't tell you where on the code the event listener were set up.

But if you perform a global search on your sources for the name of the event listener you should find it.

Answer 3

Since you haven't accepted any of the above answers, I'll add this here.

function addRoleToReportClicked(event) {
    $('#addRoleDiv').show();
    return false;
}

By adding the return false;, it should stop any other functions running. If this or any of the other solutions don't work then there must be something else refreshing the page.

Try and debug it yourself using the chrome or firefox debuggers.