jquery関数を組み合わせる - on（）hover/mouseenter/mouseleave

Question

私は一連の要素を持っています（それらを '.my要素'と呼ぶことができます）。

マウスがこれらの要素の上にあるかどうかによって変数を設定したいと考えています。以下のコードはうまくいきますが、もっと良い方法があると思われます...私はこれをしてDOMを一度参照すればよいのですか？

$(document).on('mouseenter','.my-elements', function(){ 
    mouse_is_inside = true; 
}); 

$(document).on('mouseleave','.my-elements', function(){ 
    mouse_is_inside = false; 
}); 

ありがとうございます！

Answer 1

をincidatingグローバル変数を持っているためにその一般的ではない良いアイデアあなたが一緒の両方に結合し、event.typeを確認することができます：

$(document).on('mouseenter mouseleave', '.my-elements', function (ev) { 
    mouse_is_inside = ev.type === 'mouseenter'; 
}); 

それとも、あなたがそれらを分離しておくにしたい場合は、.onはイベントマップを受け取り、別の構文は次のとおりです。

$(document).on({ 
    mouseenter: function() { 
     mouse_is_inside = true; 
    }, 

    mouseleave: function() { 
     mouse_is_inside = false; 
    } 
}, '.my-elements'); 

Answer 2

チェックアウトと同じですjQuery hover：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

UPDATE：私はちょうどあなたが（）メソッドを介してイベントを永続化する必要があります実現。その場合、あなたはそのようなイベントマップを使用することができます。

.on({ 
    mouseenter: function() { 
     console.log('enter'); 
    }, 
    mouseleave: function() { 
     console.log('bye!'); 
    } 
}) 

Answer 3

をまた試みることができる：

$(".my-elements").hover(function(eIn) { 
    // do work for mouse over 
}, 
function(eOut) { 
    // do work for mouse out 
}); 

更新と訂正

は、あなたがよりダイナミックなロックを必要と実現しましたこの場合、Jonathan LonowskiさんまたはDerek Hunzikerさんは完璧です

Answer 4

ほぼすべてのjQueryメソッドret骨壷オブジェクト、あなたがそれらを一緒に連鎖することができますので：

$(document).on('mouseenter','.my-elements', function(){ 
    mouse_is_inside = true; 
}).on('mouseleave','.my-elements', function(){ 
    mouse_is_inside = false; 
}); 

Answer 5

$('.my-elements').on('mouseenter mouseleave', function(event){ 
    mouse_is_inside = event.type === 'mouseenter'; 
}); 

が、イベント状態

Answer 6

最初に、ドキュメントではなく要素を選択できます。これは、値が正しい値に設定mouse_is_inside変数を維持する必要がありますマウスがアウトか行くたびに、否定ます

$('.my-elements').on('mouseenter mouseleave', function(){ 
    mouse_is_inside = !mouse_is_inside; 
}); 

あなたはこのようなショートカット表記を試みることができる

$('.my-elements').on('mouseenter', function(){ 
    mouse_is_inside = true; 
}); 

... 。