JavaScript Abnormal Behaviour

Question

Here is my code behind file:

protected void btnCheckUserName_Click(object sender, EventArgs e)
        {
            lblShowUserName.Text = txtUserName.Text;
        }

Here is my .aspx file:

<script type="text/javascript">
    function confirmName()
    {
        debugger;

        var userName = document.getElementById("txtUserName").value;
        var flag = false;
        if (userName != "")
        {
            flag = window.confirm("You entered" + userName + ", Are you sure to continue?");
        }

        if (flag) {

            return true;

        }
        else {
            return false;
        }

    }

</script>

Script is in my head section:

Here is the body:

<form id="form1" runat="server">
    <div>
        <asp:Label ID="lblUserName" runat="server" Text="Name:" Font-Bold="True" Font-Italic="True"></asp:Label>
        &nbsp;<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

        &nbsp;<asp:Button ID="btnCheckUserName" runat="server" Text="Click Me" OnClientClick="confirmName();" OnClick="btnCheckUserName_Click" Font-Bold="True" Font-Italic="True"/></div>

        <asp:Label ID="lblShowUserName" runat="server"></asp:Label></form>

Above is the Output:

When i left the text box empty and click the button,why does my server side code execute?Can someone explain this to me?