jQueryのmouseover/mouseoutの注意点 : jQuery

Tweet

Pocket

子要素を含む要素(親要素)にjQueryのmouseover/mouseoutメソッドを設定すると、子要素のマウスの入出の際にもイベントが発生する。
代わりにmouseenter/mouseleaveを使うと子要素のイベントは発生しない。ただしmouseleaveにはIE6,7,8は対応していない。

追記 2011.07.28 子要素のイベント発生を無視する処理はjQueryのhover()を使うと良い。
» jQueryで作る多階層ドロップダウンメニュー

» Demo

jQuery(function ($) {
    // グローバルナビ サロンの処理
    $('div#container').mouseover(function () {
        // console.log('mouseover'); デバック用
        var pTags = $('div#container p');
        $(pTags).each(function (i) {
            $(pTags[i]).css('background', 'orange');
        });
    });
    $('div#container').mouseout(function () {
        var pTags = $('div#container p');
        $(pTags).each(function (i) {
            $(pTags[i]).css('background', 'white');
        });
    });
    /* $('div#container').mouseout(function (e) {
        if (this.id == 'container') {
            // console.log('mouseout'); デバック
            var pTags = $('div#container p');
            $(pTags).each(function (i) {
                $(pTags[i]).css('background', 'white');
            });
        }
    });*/
});

mouseoutのコメントアウトしてあるコードの中のthisが返すのは常にdiv#container要素になるためイベントの発生元が子要素であるのかを判別するために使うことはできない。
jQueryのevent.targetやevent.currentTarget も同様に常にdiv#container要素を返す。

<div id="container">
    <p>1番目の段落。1番目の段落。1番目の段落。</p>
    <p>2番目の段落。2番目の段落。2番目の段落。</p>
    <p>3番目の段落。3番目の段落。3番目の段落。</p>
</div>

div#container {
    padding: 0;
    width: 800px;
    height: 200px;
    margin: 40px;
    border: 2px solid gray;
    background: silver;
    overflow: hidden;
}

div#container p {
    width: 100px;
    float: left;
    padding: 15px;
    margin: 15px;
    background: white;
    border: 1px solid #eee;
}