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

【问题标题】：button click event lost due to the alert box in text box onblur event由于文本框 onblur 事件中的警报框导致按钮单击事件丢失
【发布时间】：2010-07-14 10:43:33
【问题描述】：

我创建了一个简单的 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 函数中删除警报框时，它工作正常。按钮单击事件的某些方式丢失了。我认为这是由于警报框。知道为什么会这样吗？

【问题讨论】：

标签： javascript button textbox onchange onblur

【解决方案1】：

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

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

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

function onButtonMouseDown()
{
    clearTimeout(timer);
}

【讨论】：

@Vinod T.Patil：不是真的。唯一的“解决方法”是等到点击完成或避免使用alert。
一种方法是在警报之后显式调用按钮单击，例如 document.getElementById("Button1").click();。有用。但是，这样的示例应用程序是可以的，实际上表单上可以有其他文本框，在这种情况下，我不希望在离开第一个文本框后立即触发按钮单击。
在警报之后显式调用按钮单击可能会出现的问题是，如果用户没有实际单击按钮。 on blur 可能由于各种原因而发生，例如单击远离文本框和按钮的背景。当您点击离开浏览器时，甚至可能会发生这种情况？像 OnBlur 这样的事件太通用了，不能像这样调用其他函数。
@Corey Ogburn，这正是我想说的

【解决方案2】：

知道了....我搞定了...

在 onblur 事件中添加对按钮单击的显式调用是不正确的，因为 onblur 事件可以随时发生，例如当用户移动到其他文本框或单击表单中的任何位置等时（如 Corey Ogburn 在上面的 cmets 中所述)。因此，尽管用户实际上并没有点击按钮，但按钮点击会被触发。

因此，在 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 中，现在我可以确定是否按钮是否被点击。

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

享受！！！

【讨论】：

【解决方案3】：

编写一个函数并调用函数按钮的 mousedown 和 onClick 事件

【讨论】：