私はいつもmouseover
イベントを使用してきましたが、jQueryのドキュメントを読んでいるときに見つけましたmouseenter
。それらはまったく同じように機能するようです。
2つの間に違いはありますか?ある場合、いつ使用する必要がありますか?
(mouseout
vsにも適用されますmouseleave
)。
私はいつもmouseover
イベントを使用してきましたが、jQueryのドキュメントを読んでいるときに見つけましたmouseenter
。それらはまったく同じように機能するようです。
2つの間に違いはありますか?ある場合、いつ使用する必要がありますか?
(mouseout
vsにも適用されますmouseleave
)。
回答:
jQuery docページから次の例を試すことができます。これはとてもわかりやすいインタラクティブなデモであり、非常に明確であり、実際に自分で見ることができます。
つまり、要素の上にマウスオーバーイベントが発生すると、その要素またはその子要素から発生しますが、マウス入力イベントは、マウスがこの要素の外側からこの要素に移動したときにのみ発生します。
それともとしてmouseover()
ドキュメントには、それを置きます:
[
.mouseover()
]は、イベントの泡立ちのために多くの頭痛を引き起こす可能性があります。たとえば、この例では、マウスポインターがInner要素の上に移動すると、mouseoverイベントがその要素に送信され、次にOuterにトリクルアップされます。これにより、不都合なときにバインドされたマウスオーバーハンドラーをトリガーできます。.mouseenter()
有用な代替案については、の説明を参照してください。
mouseenterとmouseleave はイベントバブリングに反応しませんが、mouseoverとmouseout は反応します。
これは動作を説明する記事です。
$(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);})
});
mouseenter
「マウスが親要素から要素に移動したときにのみ発生する」とは限りません。イベントは、マウスが要素の外側から要素の内側に変わったときに発生します。マウスの元の要素は関係ありません。マウスはしばしば親からのものですが、常にそうであるとは限りません。たとえば、親にパディングやボーダーがない場合、マウスは祖父母から直接入ることができ、mouseenter
それでも発火します。実際、ビューポートの外側から要素に入ることができ(要素が端にある場合)、イベントは発生します。