Question

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

Answer 1

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

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

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

function onButtonMouseDown()
{
    clearTimeout(timer);
}

Answer 2

得到它......我得到了它的工作......

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

但是，这只是一个工作场所，对于这样的示例应用程序来说还可以。实际上它不太可行，因为在webform上可以有更多这样的提交按钮，我们将不得不在文本框的onblur事件中触发所有这些按钮（链接等）的点击事件。这是因为，用户可以在将数据输入文本框后单击任何提交按钮（链接等），并且onblur中的警报/确认将阻止这些点击事件。希望我很清楚。

享受!!!

Answer 3

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

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

3 个答案: