jquery - jQueryで2つの要素に対してマウスアウトイベントをトリガーするにはどうすればよいですか?

Question

A と B の 2 つの別個の div があり、角で重なっているとします。

+-----+
|     |
|  A  |
|   +-----+
+---|     |
    |  B  |
    |     |
    +-----+

マウスがAとBの両方を離れたときにイベントをトリガーしたい.

私はこれを試しました

$("#a, #b").mouseleave(function() { ... });

ただし、マウスがいずれかのノードを離れると、これによりイベントがトリガーされます。マウスがどちらのノード上にもないときにイベントをトリガーしたい。

これを行う簡単な方法はありますか？各 div でマウスの状態を追跡するグローバル変数を使用するというアイデアがありましたが、もっと洗練されたものを望んでいました。

Answer 1

私はいつもこの問題に遭遇します。私がやっていることに合っている場合の「クイックフィックス」は次のとおりです。

var timer;

$("#a, #b").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});


function doSomething() {
    alert('mouse left');
}

フィドル: http://jsfiddle.net/adeneo/LdDBn/

Answer 2

次のようなものを使用してこれを達成できると思います：

var mouseLeftD1 = false;
var mouseLeftD2 = false;

$('#d1').mouseleave(function() {
  mouseLeftD1 = true;
  if(mouseLeftD2 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD1 = false;
});

$('#d2').mouseleave(function() {
  mouseLeftD2 = true;
  if(mouseLeftD1 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD2 = false;
});

function mouseLeftBoth() {
  if(mouseLeftD1 && mouseLeftD2) {
    // .. your code here ..
  }
}