0

<p>ボタン付きのリスト（ ）を作成しました。マウスをそれらの上に移動すると、テキストボックスが黄色でマークされて書き込み可能な場所が表示されるまでに 1.2 秒かかります。マウスを離すと、通常 (白) に変わります。

私の問題は、マウスをボタンの上にすばやく移動すると、多くのテキストボックスがマークされることです。その時、1.2 秒の遅延が機能することを望んでいましたが、機能しません。しかし、マウスをボタンの内外にゆっくり動かすと機能します。

ここにフィドルがあります： http://jsfiddle.net/Pota/Fj6E6/

これが私のJavaScriptコードです

$(function () {
    $("p.pRespRoleId").mouseenter(function () {
        var timeOut = 1200;
        $this = $(this);
        $this.data("delay", setTimeout(function () {
            mouseInRespRoleId();
        }, timeOut)
             );
    })


.mouseleave(function () {
       $this = $(this);
       if ($this.next(mouseOutRespRoleId()).is(":visible")) {
           clearTimeout($this.data("delay"));
           mouseOutRespRoleId();
       }
       else {
           $this.next("p.pRespRoleId").show();
       }
   });

});

と

function mouseInRespRole() 
            {
            var txtInRespRole = document.getElementById("<%=txtRespRoleName.ClientID %>");
                txtInRespRole.style.background = "#FFFF00";
                if (document.getElementById('txtRespRoleName').value == '') 
                {
                    document.getElementById('txtRespRoleName').innerHTML = txtInRespRole;
                    return false;
                }
            }


            function mouseOutRespRole() 
            {
            var txtOutRespRole = document.getElementById("<%=txtRespRoleName.ClientID %>");
                txtOutRespRole.style.background = "white";
                if (document.getElementById('txtRespRoleName').value == '') 
                {
                    document.getElementById('txtRespRoleName').innerHTML = txtOutRespRole;
                    return true;
                }
            }
4

1 に答える 1

0

あなたのjsFiddleは確かに私を混乱させます（あなたが何を達成しようとしているのかわかりません-あなたが物事を過度に複雑にしているという具体的な可能性があります）。私はあなたの要件が正しいことを願っています...

とにかく、あなたの論理は正しいと思いますが、実装にはいくつかの欠陥がありました. したがって、ここにあなたの jsFiddle の修正された (そして部分的に修正された) バージョンがあります。

'$ this.next (mouseOutRespRoleId()).is(":visible")' の使用は確かに最も紛らわしいので、完全に削除しました。(明らかではない他の目的を達成していた場合は、より詳細な説明を提供する必要があります。)

主な問題は、$this.next(mouseOutRespRoleId()).is(":visible")が true に評価されなかったため、 を呼び出したタイマーがクリアされなかったことmouseInRespRoleId()です。

編集: IE9 の奇妙な動作 (別名バグ (?)) を処理するように、 jsFiddle の図
を更新しました。これでちらつきなく動作するはずです。 問題の簡単な説明: 明らかに、IE9 では、マウス イベントの生成に「タイミングの問題」があり、そのため、コンポーネントを複数回すばやく入力 (mouseOver) および終了 (mouseOut) すると、マウス イベントの順序が乱れることがあります。例: 次のイベント シーケンス (つまり、実際のイベント):


mouseOver -> mouseOut -> mouseOver

次の (明らかに間違った) javascript イベント シーケンス (つまり、IE9 の JS エンジンによってトリガーされるイベント) を生成する可能性があります。

mouseOver -> mouseOver(!) -> mouseOut(!)

clearTimeout($this.data("delay"))そのため、「mouseInRespRoleId」の保留中のスケジュールされた実行をクリアするために、「mouseentered」ハンドラ関数にエクストラを追加しました。IE9 (およびおそらく以前のバージョンの IE - テストされていない) では完全には動作しませんが、(私の知る限り) 可能な限り優れています。

(注: 他の (バグのない) ブラウザーでは意図したとおりに機能します。)

于 2013-05-07T10:00:10.230 に答える