代码之家 › 专栏 › 技术社区 › Vinod T. Patil

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

onblur onchange textbox button javascript

6

Vinod T. Patil · 技术社区 · 16 年前

我创建了一个简单的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事件发生,但按钮的on click没有发生。并且,当我从js函数中移除警报框时,它工作正常。一些按钮单击是如何事件丢失。我想是因为警报箱。知道为什么吗?

3 回复 | 直到 16 年前

1

6

Andy E 16 年前

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

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

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

function onButtonMouseDown()
{
    clearTimeout(timer);
}

2

Vinod T. Patil 16 年前

知道了。。。。我成功了。。。

向按钮的click-in-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>

这里,在鼠标按下按钮时 在onblur之前发生 在文本框中,我已将值设置为flag clicked 在文本框的onblur中,现在我可以确定按钮是否被点击。

但是 ,同样,这只是一个工作区,对于这样的示例应用程序是可以的:)。这在实际中不太可行,因为web表单上可以有更多这样的提交按钮,我们将不得不在文本框的onblur事件中触发所有这些按钮(链接等)的单击事件。这是因为,用户可以在文本框中输入数据后单击任何提交按钮(链接等),onblur中的alert/confirm将抑制这些单击事件希望我明白了。

享受吧!!!

3

1

SachinS 16 年前

编写函数并调用 button的mousedown和onClick事件