Javascript onclick: how to pass the event variable?

Question

I have an <asp:Panel> , and when the user clicks on it, I want to show a <div> using Javascript. I do this to prevent the need of a postback to the server (I want a highly interactive client side showing/hiding of subcontent). I use the following code:

<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(); return false;"/>

function showFilterPanel()
{
    //do some code that shows the div...
}

This works because of the return false; statement at the end. I would now like to change the function to use e.stopPropagation() instead of the return false; inside the html. I was told this is the better way of doing this, but I'm not 100% sure what the differences are between " return false; " and " e.stopPropagation() ", and why one is better than the other.

Either way, I don't know the correct syntax of how to pass the event. I tried the following but the parameter e is not correctly passed:

<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(sender);"/>

function showFilterPanel(e)
{
    //do some code that shows the div...
    e.stopPropagation();
}

The following don't seem to work either:

<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(this);"/>
<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(event);"/>
<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(e);"/>

I tested the correctness by using an alert message if the function runs, and checking for javascript errors. The errors I get were: "e is undefined" and "stopPropagation is not a method for object".

Answer 1

You can't pass the event parameter because you don't have it.

The way to get it is to register events using addEventListener .

var elm = document.getElementById("FilterButton");
elm.addEventListener("click", function (event) {
    event.stopPropagation();
});

You can also do:

elm.onclick = function (event) {
    event.stopPropagation();
};

But this notation causes issues if you want to add multiple event listeners.

---

e.stopPropagation() is better because:

• return false also does e.preventDefault() . Most instances I've seen where return false is used the intention was actually preventDefault() , and not stopPropagation() . stopPropagation() only very rarely applies. So why not say which one you wanted? (or both!)

• return false will not be called if an uncaught error occurs in your function. Imagine an onclick on an a that performs some_action() , then prevents default by return false . If some_action() throws an error the default action will not be cancelled and you might end up somewhere you didn't expect.

---

showFilterPanel(this);

this will point to the HTML element (FilterButton)

---

showFilterPanel(event);

Will try to reference a global variable event (which doesn't exist)

---

showFilterPanel(e);

Will try to reference a global variable e (which doesn't exist)

---

In older browsers (Internet Explorer) there was a global variable event (typically window.event ) that had the most recent event. This makes it easier to get the event if you're using your notation. I'm not a big fan of this approach. I don't like the global dependency.