web-dev-qa-db-ja.com

jQueryでmouseleave()時にカーソルが置かれている要素を確認しますか?

このようなチャート上にバブルとしてレイアウトされたリスト要素のセット(_<li>_内の_<ul>_)があります。バブルは_<li>_要素です。

http://i.stack.imgur.com/PR7vR.png

の違いを検出できるようにしたい

  1. マウスをバブル#1からグリッドに移動する
  2. バブル#1から直接別のバブル(バブル2など)にマウスを移動する

バブルの場合でも$(this).mouseleave()を使用しようとしましたが、現在ホバリングしている要素ではなく、離れる要素が登録されます。

mouseleave()でマウスが移動している要素を取得する方法についてのアイデアはありますか?

28
Tyler Nieman

event.toElement || e.relatedTargetを使用する必要があります:

$('li').mouseleave(function(e)
{
    // new element is: e.toElement || e.relatedTarget
});

(ブラウザの互換性を確保するために|| e.relatedTargetに注意するように編集)

45
N Rohler

Ordinarey javascriptを使用できる場合、ほとんどのブラウザーで、すべてのイベント(e)マウスオーバーおよびマウスアウトにe.relatedTargetがあります。 IE#9の前にevent.toElementとevent.fromElementがあります。これは、マウスオーバーとマウスアウトのどちらをリッスンしているかによって異なります。

somebody.onmouseout=function(e){
  if(!e && window.event)e=event;
  var goingto=e.relatedTarget|| event.toElement;
  //do something
}
somebody.onmouseover=function(e){
  if(!e && window.event)e=event;
  var comingfrom=e.relatedTarget|| e.fromElement;
  //do something
}
8
kennebec