Menu
I have created a simple web form, containing one text box and one button. I have captured the onblur event of the text box.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function onTextBoxBlur()
{
alert("On blur");
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onblur="onTextBoxBlur();"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
When I enter some value in text box and click on the button, then the onblur event of textbox occurs, but the onclick of the button doesn't. And, when I remove the alert box from the js function then it works fine. Some how the button click is event is lost. I think it is due to the alert box. Any idea why is this so?
674
A "click" of a button has two parts, mouse down and mouse up. When you mouse down on the button, it gains focus - blurring the text box and firing your alert. Since alert dialogs are modal, they halt all activity on the page so the button doesn't detect the mouse up and your click doesn't complete.
It could be possible to work around your issue using a timer within the blur event, and cancelling that timer within the mousedown event of the button:
var timer;
function onTextBoxBlur()
{
timer = window.setTimeout(function () { alert("On blur"); }, 0);
return true;
}
function onButtonMouseDown()
{
clearTimeout(timer);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
