由于文本框 onblur 事件中的警报框而导致按钮单击事件丢失

发布于 2024-09-09 21:38:27 字数 824 浏览 8 评论 0原文

我创建了一个简单的 Web 表单，其中包含一个文本框和一个按钮。我已经捕获了文本框的 onblur 事件。

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

当我在文本框中输入一些值并单击按钮时，文本框的 onblur 事件发生，但按钮的 onclick 事件不会发生。而且，当我从 js 函数中删除警报框时，它工作正常。按钮单击事件的一些方式丢失了。我认为这是由于警报框造成的。知道为什么会这样吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北城挽邺 2024-09-16 21:38:27

按钮的“单击”分为两个部分：鼠标按下和鼠标松开。当您将鼠标放在按钮上时，它会获得焦点 - 模糊文本框并触发警报。由于警报对话框是模态的，它们会停止页面上的所有活动，因此按钮不会检测到鼠标松开，并且您的单击也不会完成。

可以使用模糊事件中的计时器来解决您的问题，并在按钮的 mousedown 事件中取消该计时器：

var timer;
function onTextBoxBlur()  
{  
    timer = window.setTimeout(function () { alert("On blur"); }, 0);  
    return true;  
}  

function onButtonMouseDown()
{
    clearTimeout(timer);
}

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);
}

回复收藏 0 原文

飞烟轻若梦 2024-09-16 21:38:27

明白了....我开始工作了...

在 onblur 事件中添加对按钮单击的显式调用是不正确的，因为 onblur 事件可能随时发生，例如当用户移动到其他文本框或单击表单中的任意位置时等（正如科里·奥格本在上面的评论中提到的）。因此，尽管用户实际上并未单击按钮，但按钮单击仍会被触发。

因此，在 onblur 事件中应该有一种方法来识别提交是否被单击，如果是则明确触发按钮的单击。这是代码，

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var clicked = 0;

    function onTextBoxBlur()
    {   
        alert("On blur " + clicked);      

        if(1 == clicked)
        {
           clicked = 0;
           document.getElementById("Button1").click();
        }

        return true;
    }
    function SubmitButtonClicked()
    {
        clicked = 1;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>

    </div>
    <asp:TextBox ID="TextBox1" runat="server" onfocusout="onTextBoxBlur();"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" onmousedown="SubmitButtonClicked();" />    
    </form>
</body>
</html>

在这里，在按钮的 mousedown 事件上，该事件在文本框的 onblur 之前发生，我设置了一个值来标记 clicked 并在 onblur 的文本框，现在我可以识别按钮是否被单击。

但是，这只是一个解决方法，对于此类示例应用程序来说是可以的:)。在实践中不太可行，因为网络表单上可能有更多这样的提交按钮，并且我们必须在文本框的 onblur 事件中触发所有此类按钮（链接等）的单击事件。这是因为，用户可以在将数据输入文本框后单击任何提交按钮（链接等），并且 onblur 中的警报/确认将抑制这些单击事件。希望我说清楚了。

享受！！！

Got it.... I got it working...

Adding explicit call to the button's click in onblur event is not correct, because onblur event can happen any time, like when user move to other text box or click anywhere in the form etc. (as mentioned by Corey Ogburn in comments above). So the button click would be fired though the user didn't actually clicked the button.

So, in onblur event there should be a way to identify that the submit is being clicked and if it is then fire the button's click explicitly. Here is the code,

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var clicked = 0;

    function onTextBoxBlur()
    {   
        alert("On blur " + clicked);      

        if(1 == clicked)
        {
           clicked = 0;
           document.getElementById("Button1").click();
        }

        return true;
    }
    function SubmitButtonClicked()
    {
        clicked = 1;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>

    </div>
    <asp:TextBox ID="TextBox1" runat="server" onfocusout="onTextBoxBlur();"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" onmousedown="SubmitButtonClicked();" />    
    </form>
</body>
</html>

Here, on mousedown event of the button, which occurs before onblur of the text box, I have set a value to flag clicked and in onblur of the textbox, now I can identify if the button is being clicked or not.

But, again this is just a workarround and OK for such sample application :). It is less feasible in practical because there can be more such submit buttons on the webform and we will have to fire click event of all such buttons (links etc.) in onblur event of the textbox. This is because, user can click on any of the submit buttons (links etc.) after entering data into the textbox and alert/confirm in onblur is going to supress those click events. Hope I am clear.

Enjoy!!!

回复收藏 0 原文