jQueryのmouseenterについて

jQueryで、#div1　にmouseenter,mouseleaveを設定していますが、#div1の領域の一部に重なって表示している別の要素（#div1の子要素ではない）があり、その上にマウスが乗るとmouseleaveが発動します。
これを、発動しないようにする方法はあるでしょうか？

No.1 回答者： fujillin 回答日時： 2013/04/05 23:05

＞div1の領域の一部に重なって表示している別の要素

重なっている要素のうちの、ある部分ではイベントと判断し、別の部分ではそうでないという意味でしょうか？
一番簡単なのは、目的に合うようにHTMLの構成を調整してしまうことだと言えますが、そういうわけにも行かないのでしょうから…

方法はいろいろあろうかと思いますが、目的のイベント処理の前にイベントをフィルタリングする関数を作ってあげればよろしいかと思います。
jQueryのmouseenterやmouseleaveも内部で同様のことを行なっているはずで、mouseoverやmosuoutを監視してこれをmouseenterやmouseleaveに判断し直してイベントを発生させているはずです。

ただし、ご質問のケースでは上にある一つの要素内をマウスが移動していても対象範囲内の場合と対象範囲外の場合があって、その場合にイベント処理を使い分けたいのでしょうから、通常のmouseoverやmosuoutの監視だけではうまくいかないでしょう。


よくわかってませんが、想像するところ、#div1のエリア内にマウスがあるか/ないかで判定すれば、ご質問の内容に合うのではないでしょうか。
マウスイベントはバブリングするので、両方の上位要素でまとめて処理を行なっても良いですし、要素が#div1と重なる要素の2つだけに限定できるのなら、重なっている要素内にマウスがある間だけマウスの位置を監視するようにしておいてもよろしいかと思います。

もっと広げて、最上位のdocument要素で常時マウス位置を監視して、document上の対象エリアにあるかないかでイベントの発生を判断するといった考え方もできると思いますが、常時監視の場合、処理がいつも動作する関係から、なるべく負荷のかからない記述にしておく必要がありそうに思います。
その意味からは、特定した要素内にマウスがあるときだけ監視するほうが良いかもしれません。


具体的な監視方法としては、mousemoveなどでマウスの位置と対象要素を監視して、対象エリアに入る/出るが発生した時に、目的の処理（＝もとからのイベント処理）に処理を渡すような、フィルタリング関数を作成しておくといった感じです。


・・・と、ここまで書いて思いついたのは、
ある範囲へのマウスの出入りを監視すれば良いだけでしたら、一番上に重ねて範囲のみのdivを表示しておき、そのdivに対してmouseover/outを設定しておくという方法でも目的を達せられそうに思います。