Prevent LinkButton post back OnClientClick not working. Why?

I know there are plenty of answers surrounding this topic but I just cannot get this to work.

I need to prevent a link button posting back and the following code is not working. The code is definitely being hit in all the required places.

Link button definition:

  <asp:LinkButton ID="NavHelp" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>

Javascript function (definitely being hit)

function showConfirm(event) {
  event.stopPropagation();
  return false;
}

However after showConfirm returns false the link button still posts back to the server side NavHelp method.

As a side note, I also put a breakpoint in the __doPostback method generated by .NET and it does get hit after showConfirm returns false.

Can anyone shed any light on this?

Solution 1:

Right, figured it out. I needed to include the return statement in the OnClientClick attribute:

OnClientClick="return showConfirm(event);"

NOT

OnClientClick="showConfirm(event);"

Solution 2:

incidentally, you can use your original code, but rather than using event.stopPropagation() you can use event.preventDefault()

so your code would be

<asp:LinkButton ID="NavHelp" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>

function showConfirm(event) {
  event.preventDefault();
  return false;
}

read some more on event.preventDefault() vs event.stopPropagation() here : http://davidwalsh.name/javascript-events

basically the preventDefault prevents the elemnt from carrying out its dfault action, i.e. visting a link or submitting a form, while stoppropagation allows the dfault action to occur, BUT doesn't inform any parent elements that it has happened.

i created a little jsfiddle : http://jsfiddle.net/XgSXr/ that shows you the prevent default, this should allow you to put in your own javascript logic, display modals etc, before successfully pushing through the link click.

Solution 3:

This works:

<asp:LinkButton ID="NavHelp" ClientIDMode="Static" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>
<script>
    $("#NavHelp").click(function(event) {
        if (showConfirm()) {
            event.stopPropagation();
            event.preventDefault();
            return false;
        }
        return true;
    });
</script>