SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jquery】IEのhover(mouseenter/mouseleave)がおかしい?

問題

mouseenter、mouseleaveイベントを使った処理をjQueryで書いたのだが、IEとそれ以外で何か動きが違う。

IEは想定外の箇所でmouseleaveが発生した。なぜ?

たぶん答え

Microsoftさんの世界ではよくあるみたいなのですが、背景色が指定されていないコントロールは、その透明部分にマウスが出た時点で、コントロールからマウスが外れたというイベントが発生するようです。

IEも同じなのかもしれません。

ブラウザで発生した問題の現象は、背景色をtransparentではなく、何かしらの色を設定することで、発生しなくなりました。

jQueryの内部でも、mouseenter、mouseleaveの処理はIEか非IEかで切り替えているようです。

問題の例

こういうメニューを作るとする。

一番外側の全体を囲んでいる外枠のボックス(赤点線)の中に背景色がないとき、外枠にmouseleaveイベントハンドラを登録しておくと、

・ IEは大分類、小分類のボックス(黄色くなっているところ)を外れて、透明な部分にマウスが入ると、そこでmouseleave発生。
・ 他のブラウザは外枠(赤点線の要素)を抜けたときにmouseleave発生。

さらに困ったことに

・ IEは大分類と小分類など、中の要素の隙間の色がないところ(黄色い四角と黄色い四角の隙間など)にマウスが移動すると、そこでmouseleave発生。
・ 他のブラウザはそのような現象は発生しない。

もし「透明な箇所に入ったら~」をしたかったらありがたいが、「ボックスから外れたら~」をしたかったら、とても困る。

まとめ

hoverやmouseenter,mouseleaveの動きがIEでおかしいときは、とりあえず背景色をつけてみるといいかもしれない。

関連するメモ

コメント