6

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

4

3 回答 3

6

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

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

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

function onButtonMouseDown()
{
    clearTimeout(timer);
}
于 2010-07-14T10:49:20.000 回答
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 中的警报/确认将抑制这些单击事件。希望我清楚。

享受!!!

于 2010-07-15T05:57:16.370 回答
1

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

于 2010-07-14T15:40:06.770 回答