IEでマウスカーソル位置にある要素を(タグ種別に拘わらず)取得する方法

Question

今カーソルが乗っている位置にある全ての要素を取得したいです。

$(':hover')

とセレクタを指定しロジックを組みましたが
IEでは上手くいきません。
(アンカー以外の要素情報がとれません。hoverの性質からすれば正しい動きなのでしょうが、、)

IEでも、今現在マウスカーソルが乗っている位置にある要素を取得する方法はありませんでしょうか？

---- 具体的にやりたいこと ---

ある要素群からマウスポインタが外れたら、処理を発行したいのです。

さらに具体的に言えば

(1).ある要素をクリックすると、編集用メニューペインがモーダルで表示される
(2).以下の条件がそろったらペインを消す
・クリックした要素からカーソルが外れた
・編集用メニューペイン上にカーソルが無い(つまり他の要素へカーソルを移動させた)

やったこと
1.要素/ペインに共通のCSSクラスを持たせています。
2.ペインを表示する処理内でこのようにマウスカーソルが外れた際の処理を書いています。

     $(要素).mouseout(function(){
       if($(':hover').hasClass('共通で持たせているCSSクラス')==false){
         ペインを非表示にする処理
       }
     });

編集用ペイン上にマウスカーソルがあることが取得出来れば動くのですが、、
IEでは$(':hover')に何も入ってこない状態です。

→ つまり編集ペイン上にカーソルを持っていくと、ペインが消えます、、

---

IEでもマウスカーソル位置にある要素を(タグ種別に拘わらず)取得する方法、ご存知の方がいらっしゃいましたらご教示ください。

Answer 1

マウスカーソル位置にある要素を取得する方法ではないのですが、
私だったら、ペインの要素をクリックする要素の中に入れて、 以下のようにすると思います。

    $("要素").click(function(){
      $("ペイン").show();
    });
    $("要素").mouseleave(function(){
      $("ペイン").hide();
    });

中に入れるのが難しい場合は以下のようにすると思います。

    $("要素").click(function(){
      $("ペイン").show();
    });
    $("ペイン").mouseenter(function(){
      $("ペイン").show();
    });
    $("要素, ペイン").mouseleave(function(){
      $("ペイン").hide();
    });

Comments

[takeyoshi]

ありがとうございます！
ご教示の通り「mouseleave」イベントを利用することによって解決出来ました。
---
恥ずかしながら、「mouseenter」「mouseleave」イベントについて良く把握していませんでした。
指定した要素とマウスポインタの関係で処理をするなら「mouseenter」「mouseleave」ですね！ありがとうございます！

---
他の処理との兼ね合いもあり以下のように指定したら上手く行きました。

～ 前段処理でペインは表示されている
～ ここからイベントハンドラ登録

// show/hide controle
$(ペイン).mouseenter(function(){
$(ペイン).show();
});
$(要素).mouseleave(function(){
$(ペイン).hide();
});
$(ペイン).mouseleave(function(){
$(ペイン).hide();
});

これでペインかつ要素をカーソルが離れるとペインが消えるようになりました。
ありがとうございました。

[ina]

解決されたようで良かったです。

Answer 2

例えば #a をクリックすると #b が表示され、マウスカーソルが #b を外れたら #b が非表示になる、ということですよね？

以下のようなコードが定番かと思います。

// a をクリックしたら b を表示する
$('#a').on("click", function(){
    $('#b').show();
});

// b の上でマウスカーソルが動いたらバブリングを停止する
$('#b').on("mousemove", function(ev){
    ev.stopPropagation();
});

// 任意の場所でマウスカーソルが動いたら b を非表示にする
// ただしマウスカーソルが b の上にあるときは処理されない
$(document).on("mousemove", function(){
    $('#b').hide();
});

マウスカーソルが b の上にあるときはバブリングが止まるので document まで mousemove が伝わりません。
一方、b 以外の要素の上にマウスカーソルがある場合は、バブリングにより document の mousemove が処理されます。

Comments

[ngyuki]

よく考えたら、これなら mouseleave でいい気がする・・質問を読み違えているかもしれません(>_<)

[takeyoshi]

ありがとうございます！
おっしゃられる通り「mouseleave」イベントを活用することで解決出来ました。