[jQuery]mouseoverよりmouseenterの方が使い勝手が良かった話

今更なんだけどさ。

問題があった

こういうのがあるとする。

<button><span>...</span></button>

で、こうだったとする。

button{
    padding: 20px;
}

つまり、親要素と子要素それぞれに触れられる状態。

こんなのを組んだとする。

$('button').on('mouseover',function(){...})

buttonにカーソルを乗せると当然発火する。

それは良いのだけど、こんな感じに組んだとして

$('button').on('mouseover',function(){
    $(this).addClass('active');
}).on('click',function(){
    $(this).removeClass('active');
})

「マウスをbutton>spanに乗せる→クリックする→マウスをspanからbuttonに移動」をすると、「.active付与（mouseover）→.active削除(click)→.active付与（mouseover）」となる。

セレクタに親要素を指定してmouseoverした場合、親子間の移動も発火条件に該当する。普通そんな事を望んだりしない。

装飾のためにspanを使うこともあるし、このままだと困るよねという話。

mouseenterで解決

上記の例だとこうなる。

$('button').on('mouseenter',function(){
    $(this).addClass('active');
}).on('click',function(){
    $(this).removeClass('active');
})

mouseenterを使うと親子間の移動で発火しない。

良かったですね。

mouseleaveとmouseoutも同じこと

上記は「カーソルを乗せる」に対しての話だったけど、「カーソルを外す」というイベントに関しても同様のケースがあり対応するイベントがある。

ざっくりこんな感じ。

mouseenterとmouseleaveでやっていくのが無難かなと思う。