CODEWITHSUNDEEP
javascriptasp.netonclick
user1884155
user1884155

Reputation: 3736

Javascript onclick: how to pass the event variable?

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".

Upvotes: 0

Views: 2322

Answers (1)

Halcyon
Halcyon

Reputation: 57709

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.

Upvotes: 1

Related Questions