私は常にmouseoverイベントを使用していましたが、jQuery のドキュメントを読んでいるときに を見つけましたmouseenter。それらはまったく同じように機能するようです。
これら 2 つには違いがありますか? もし違いがあるなら、いつ使用すればよいですか? (と
にも適用されます)。mouseoutmouseleave
ベストアンサー1
以下の例を試してみてください。jQueryドキュメントこのページは、非常にわかりやすく、実際に自分で確認できる、小さくてインタラクティブなデモです。
var i = 0;
$("div.overout")
.mouseover(function() {
i += 1;
$(this).find("span").text("mouse over x " + i);
})
.mouseout(function() {
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave")
.mouseenter(function() {
n += 1;
$(this).find("span").text("mouse enter x " + n);
})
.mouseleave(function() {
$(this).find("span").text("mouse leave");
});div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>つまり、マウスオーバー イベントは、子要素または親要素のいずれかから要素上にマウスを置いたときにその要素上で発生しますが、マウスエンター イベントは、マウスがこの要素の外部からこの要素に移動したときにのみ発生します。
またはmouseover()ドキュメントとしてそれを置く：
[
.mouseover()] は、イベント バブリングが原因で多くの問題を引き起こす可能性があります。たとえば、この例では、マウス ポインターが Inner 要素上に移動すると、mouseover イベントがその要素に送信され、Outer に伝わります。これにより、バインドされた mouseover ハンドラーが不適切なタイミングでトリガーされる可能性があります。.mouseenter()便利な代替案については、の説明を参照してください。