событие нажатия кнопки потеряно из-за предупреждения в текстовом поле события onblur - PullRequest
Новая
       64

событие нажатия кнопки потеряно из-за предупреждения в текстовом поле события onblur

6 голосов
/ 14 июля 2010

Я создал простую веб-форму, содержащую одно текстовое поле и одну кнопку.Я зафиксировал событие 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 текстового поля, но нажатие кнопкит.И когда я удаляю окно оповещения из функции js, тогда он работает нормально.Кое-как событие нажатия кнопки теряется.Я думаю, что это связано с окном оповещения.Есть идеи, почему это так?

Ответы [ 3 ]

6 голосов
/ 14 июля 2010

«Щелчок» кнопки состоит из двух частей: мыши вниз и мыши вверх. Когда вы нажимаете кнопку мыши вниз, она получает фокус - размывание текстового поля и срабатывание оповещения. Поскольку диалоговые окна оповещений являются модальными, они останавливают все действия на странице, поэтому кнопка не обнаруживает мышь, и ваш щелчок не завершается.

Можно обойти вашу проблему, используя таймер в событии размытия, и отменить этот таймер в событии mousedown кнопки: 

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

function onButtonMouseDown()
{
    clearTimeout(timer);
}
2 голосов
/ 15 июля 2010

Понял .... Я получил это работает ...

Добавление явного вызова к нажатию кнопки в событии onblur является неправильным, поскольку событие onblur может произойти в любое время, например, когда пользователь переходит в другое текстовое поле или щелкает в любом месте формы и т. Д. (Как упомянуто Кори Оггурном в комментариях выше ). Таким образом, нажатие кнопки будет выполнено, хотя пользователь фактически не нажал кнопку.

Итак, в событии 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 текстового поля теперь я могу определить, если кнопка нажата или нет.

Но , опять же, это всего лишь обходной путь и хорошо для такого примера приложения :). На практике это менее осуществимо, потому что в веб-форме может быть больше таких кнопок отправки, и нам придется запускать событие нажатия всех таких кнопок (ссылок и т. Д.) В событии onblur текстового поля. Это связано с тем, что пользователь может нажать любую из кнопок отправки (ссылки и т. Д.) После ввода данных в текстовое поле, и оповещение / подтверждение в onblur собирается подавить эти события щелчка. Надеюсь, я ясно.

Наслаждайтесь !!!

1 голос
/ 14 июля 2010

Напишите функцию и вызовите функцию из mousedown кнопки и событий onClick

...