5

mouseout最近、javascriptのイベントで奇妙な動作を発見しました。私のフィドルを見てください：http://jsfiddle.net/Uf3xQ/25/

ボタンにカーソルを合わせると、mouseenterイベントが発生します。ボタンを離れると、mouseoutイベントが発生します。ここまでは順調ですね。

ホバーしてからクリックすると、クリックイベントがボタンの上に配置されたdivを表示すると、mouseoutイベントも発生します。

しかし、setTimeoutたとえば、少し遅れて div が表示されると、マウスを動かすまで mouseout イベントは発生しません。

この振る舞いを説明してもらえますか?

更新: バグを chromium に提出したところ、彼らはそれを確認しました。ここを参照してください: http://code.google.com/p/chromium/issues/detail?id=159389

バグはOpera、Safari(WebKit共通)、IEでも発生

4

5 に答える 5

4

オーバーレイでデリゲートを使用して、イベントをバブルアップしてみてください。
編集 フィドルは今日遅く、私が最初に投稿したフィドルには、私が使用したコードが含まれていませんでした。

これは、jQuery バージョン (1.8.2) で選択された jsBIN フォークへのリンクをいじって動作します: http://jsbin.com/ugeniq/3/edit

EDIT 2 divのないマウス/オーバー/アウトが機能しないことに気付きました。コードを更新したので、div オーバーレイの有無にかかわらず動作するようになりました。

var fail = true;

var button = document.getElementById("button");
var overlay = document.getElementById("overlay");
var log = document.getElementById("log");


button.addEventListener('click', function() {
    if (fail) {

        // mouseout won't be fired until you move the mouse
        window.setTimeout(function() {
            overlay.style.display = 'block';
        }, 0);

    } else {

        // mouseout event is fired instantly
        overlay.style.display = 'block';

    }


    log.innerHTML += 'over' + "<br>";

}, false);

button.addEventListener('mouseover', function() {
    log.innerHTML += 'over' + "<br>";
}, false);

button.addEventListener('mouseout', function() {
    log.innerHTML += 'out' + "<br>";
}, false);

$(overlay).delegate(button, 'mouseover', function() {
        log.innerHTML += 'over' + "<br>";
});

$(overlay).delegate(button, 'mouseout', function() {
        log.innerHTML += 'out' + "<br>";
    });
于 2012-11-08T01:29:59.617 に答える
2

あいまいなブラウザのバグのようです ( Chrome)。Firefoxうまく機能しているようです。他のブラウザについてはわかりません。

わかりやすくするために、すべてをネイティブ js に置き換えました。

http://jsfiddle.net/qLCY3/4/

于 2012-11-05T09:22:02.027 に答える
2

WebKit bugzilla を閲覧しましたが、 https: //bugs.webkit.org/show_bug.cgi?id=4117があなたのバグのようです。バグが失われたようです (404 エラー)。

于 2012-11-05T09:39:59.070 に答える
1

この問題を解決する最善の方法は、ボタンをラップしてオーバーレイし、マウスオーバーとマウスリーブをこのラッパーに変更することです。

// HTML

<div class="helper">
  <div class="overlay"></div>
  <button class="button">Foo</button>
</div>

// JS

var fail = true;
$$('.helper').addEvent('mouseover', function() {
    console.log('over');
});

$$('.helper').addEvent('mouseleave', function() {
    console.log('out');
});

$$('.button').addEvent('click', function() {
    if(fail) {

        // mouseout won't be fired until you move the mouse
        window.setTimeout(function() {
            $$('.overlay').setStyle('display','block');
        }, 0);

    } else {

        // mouseout event is fired instantly
        $$('.overlay').setStyle('display','block');

    }
});
于 2012-11-09T13:45:28.420 に答える