【jquery】IEのhover（mouseenter/mouseleave）がおかしい？
Category JavaScript
/ Tagged jQuery
2011/06/21
問題
mouseenter、mouseleaveイベントを使った処理をjQueryで書いたのだが、IEとそれ以外で何か動きが違う。
IEは想定外の箇所でmouseleaveが発生した。なぜ？
たぶん答え
Microsoftさんの世界ではよくあるみたいなのですが、背景色が指定されていないコントロールは、その透明部分にマウスが出た時点で、コントロールからマウスが外れたというイベントが発生するようです。
IEも同じなのかもしれません。
ブラウザで発生した問題の現象は、背景色をtransparentではなく、何かしらの色を設定することで、発生しなくなりました。
jQueryの内部でも、mouseenter、mouseleaveの処理はIEか非IEかで切り替えているようです。
問題の例
こういうメニューを作るとする。
一番外側の全体を囲んでいる外枠のボックス（赤点線）の中に背景色がないとき、外枠にmouseleaveイベントハンドラを登録しておくと、
・ IEは大分類、小分類のボックス（黄色くなっているところ）を外れて、透明な部分にマウスが入ると、そこでmouseleave発生。
・ 他のブラウザは外枠（赤点線の要素）を抜けたときにmouseleave発生。
さらに困ったことに
・ IEは大分類と小分類など、中の要素の隙間の色がないところ（黄色い四角と黄色い四角の隙間など）にマウスが移動すると、そこでmouseleave発生。
・ 他のブラウザはそのような現象は発生しない。
もし「透明な箇所に入ったら～」をしたかったらありがたいが、「ボックスから外れたら～」をしたかったら、とても困る。
まとめ
hoverやmouseenter,mouseleaveの動きがIEでおかしいときは、とりあえず背景色をつけてみるといいかもしれない。
コメント