由于文本框的onblur事件中弹出了警告框，导致按钮点击事件丢失。

Question

由于文本框的onblur事件中弹出了警告框，导致按钮点击事件丢失。

6

我创建了一个简单的网页表单，其中包含一个文本框和一个按钮。我已经捕获了文本框的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函数中删除警告框时，它就可以正常工作了。不知何故，按钮点击事件丢失了。我认为这是由于警告框所致。有任何想法吗？

- Vinod T. Patil

3个回答

3

明白了...我搞定了...

在onblur事件中显式调用按钮的点击不正确，因为onblur事件可能随时发生，比如当用户移动到其他文本框或单击表单中的任何位置等（如上面Corey Ogburn在评论中提到的）。因此，即使用户实际上没有点击按钮，按钮的点击也会被触发。

因此，在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中的警报/确认将抑制这些单击事件。希望我讲得清楚。

享受!!!

- Vinod T. Patil

1

编写一个函数，并从按钮的mousedown和onClick事件中调用该函数。

- SachinS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

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

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

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

function onButtonMouseDown()
{
    clearTimeout(timer);
}