mouseoverイベントとmouseenterイベントの違いは何ですか?


153

私はいつもmouseoverイベントを使用してきましたが、jQueryのドキュメントを読んでいるときに見つけましたmouseenter。それらはまったく同じように機能するようです。

2つの間に違いはありますか?ある場合、いつ使用する必要がありますか?
mouseoutvsにも適用されますmouseleave)。

回答:


118

jQuery docページから次の例を試すことができます。これはとてもわかりやすいインタラクティブなデモであり、非常に明確であり、実際に自分で見ることができます。

つまり、要素の上にマウスオーバーイベントが発生すると、その要素またはその子要素から発生しますが、マウス入力イベントは、マウスがこの要素の外側からこの要素に移動したときにのみ発生します。

それともとしてmouseover()ドキュメントには、それを置きます:

[ .mouseover()]は、イベントの泡立ちのために多くの頭痛を引き起こす可能性があります。たとえば、この例では、マウスポインターがInner要素の上に移動すると、mouseoverイベントがその要素に送信され、次にOuterにトリクルアップされます。これにより、不都合なときにバインドされたマウスオーバーハンドラーをトリガーできます。.mouseenter()有用な代替案については、の説明を参照してください。


40
mouseenter「マウスが親要素から要素に移動したときにのみ発生する」とは限りません。イベントは、マウスが要素の外側から要素の内側に変わったときに発生します。マウスの元の要素は関係ありません。マウスはしばしば親からのものですが、常にそうであるとは限りません。たとえば、親にパディングやボーダーがない場合、マウスは祖父母から直接入ることができ、mouseenterそれでも発火します。実際、ビューポートの外側から要素に入ることができ(要素が端にある場合)、イベントは発生します。
カラム

2
デモが一番の説明です;)
Luckylooke

実際には、デモをいじってみてください。
Kevin Wheeler


4

このような質問にはよくあることですが、Quirksmodeが最良の答えです。

jQueryの目標の1つはブラウザーにとらわれないものにすることなので、どちらのイベント名を使用しても同じ動作がトリガーされると思います。編集:他の投稿のおかげで、これは事実ではないことがわかりました


0
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });


要素に子要素がない場合でも、要素に子がある場合、ペアの動作はまったく異なります。簡単に言えば、要素にマウスを渡し、次にその子に渡すと、mouseover / mouseoutの両方が起動しますが、技術的には要素内にマウスがあるため、mouseenterだけが起動します。
2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.