6

1 つのテキスト ボックスと 1 つのボタンを含む単純な 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

ボタンの「クリック」には、マウスダウンとマウスアップの 2 つの部分があります。ボタンにマウスを合わせると、ボタンがフォーカスされ、テキスト ボックスがぼやけ、アラートが発生します。アラート ダイアログはモーダルであるため、ページ上のすべてのアクティビティが停止するため、ボタンがマウスアップを検出せず、クリックが完了しません。

ブラー イベント内でタイマーを使用し、ボタンのマウスダウン イベント内でそのタイマーをキャンセルすることで、問題を回避できる可能性があります。

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>

ここでは、テキスト ボックスのonblur の前に発生するボタンの mousedown イベントで、フラグに値を設定し、テキスト ボックスのclickedonblur で、ボタンがクリックされているかどうかを識別できるようになりました。

しかし、これも単なる回避策であり、そのようなサンプル アプリケーションには問題ありません :)。Web フォームにはこのような送信ボタンがさらに存在する可能性があり、テキスト ボックスの onblur イベントですべてのボタン (リンクなど) のクリック イベントを発生させる必要があるため、実際にはあまり実現可能ではありません。これは、ユーザーがテキストボックスにデータを入力した後に任意の送信ボタン (リンクなど) をクリックすることができ、onblur のアラート/確認がそれらのクリック イベントを抑制するためです。私がはっきりしていることを願っています。

楽しみ！！！

于 2010-07-15T05:57:16.370 に答える
1

関数を記述し、ボタンのマウスダウンとonClickイベントから関数を呼び出します

于 2010-07-14T15:40:06.770 に答える