6

onclick要素をクリックするプロセスによって onchange イベントがページの他の場所で発生する場合、単純な JavaScript イベントを発生させる方法を知っている人はいますか? この問題を示すために、非常に単純なページを作成しました。

<html>
    <body>
        <input type="text" name="test" id="test1" onchange="return change(event);" />
        <a href="#" id="test2" onclick="return bang();">Bang</a>
        <a href="#" id="test3" onclick="return boom();">Boom</a>
        <script type="text/javascript">
            function change(event) {
                alert("Change");
                return true;
            }

            function bang() {
                alert("Bang!");
                return true;
            }

            function boom() {
                alert("Boom!");
                return true;
            }
        </script>
    </body>
</html>

bang リンクをクリックすると、Bang! が表示されます。アラート。Boom は Boom アラートを表示します。テキスト フィールドにテキストを入力してタブ アウトすると、変更アラートが表示されます。すべて順調です。

ただし、テキスト フィールドにテキストを入力し、最初にタブ移動したり他のものをクリックしたりせずに、[Bang] または [Boom] のいずれかをクリックすると、Change アラートが表示され、他には何も表示されません。変更アラートに続いて、Bang または Boom が表示されることを期待しています。

何が起きてる？私の変更イベントは true を返します。クリック イベントが確実に発生するようにするにはどうすればよいですか?

4

3 に答える 3

3

わかりました...それで、少し説明する時間のようです。

説明

onchangeフォーカスが要素から移動するとすぐにイベントがトリガーされるため、このエラーが発生します。inputあなたの例では、要素からフォーカスを奪うアクションは、マウスをクリックしたmousedownときにトリガーされるイベントです。これは、リンクにアクセスすると、関数が起動され、アラートがポップアップ表示されることを意味します。mousedownonchange

一方、イベントはイベントonclickでトリガーされmouseupます（つまり、マウスの圧力を解放するclick, hold/pause, releaseと、onlcickイベントでこれを証明できます）。状況に戻ります... mouseup(ie onclick) が発生する前に、フォーカスは関数alertからトリガーされたものに移動しますonchange。

修理

これを修正するには、いくつかのオプションがあります。onclick="...."usingから への最も単純な変更onmousedown="...."。

setTimeoutまたは、次のように使用できます。

function change() {
    setTimeout(function (){
        alert("Change event")
    }, 100)
}

onmousedown好ましい方法として提案します。タイムアウト時に所定の時間以上リンクをクリックしたままにすると、setTimeoutメソッドは失敗します。

于 2013-07-16T21:54:48.800 に答える
3

問題は、alert()関数が何らかの方法でイベント チェーンを取得することです。これをテストします。

<html>
<body>
    <input type="text" name="test" id="test1" onchange="return change(event);" />
    <a href="#" id="test2" onclick="return bang();">Bang</a> <a href="#" id="test3" onclick="return boom();">Boom</a>
    <script type="text/javascript">
        function change(event) {
          console.log("change");
            return true;
        }  

        function bang() {
            console.log("bang");
            return true;
        }

        function boom() {
            console.log("boom");
            return true;
        }
    </script>
</body>

ご覧のとおり、コンソールで期待どおりの動作が得られます。

JSビン

于 2013-07-16T19:54:48.883 に答える