JQuery işlevlerini birleştir - on() hover/mouseenter/mouseleave

Question

Bir dizi öğem var (onları '.my-elements' olarak adlandırabilirim) - belgede bazı yükleme hazırken, diğerleri daha sonra bir sayfalandırma komut dosyası aracılığıyla yüklenir.

Farenin bu öğelerin üzerinde olup olmadığına göre bir değişken ayarlamak istiyorum. Aşağıdaki kod çalışır, ancak daha iyi bir yol olduğundan şüpheleniyorum ... Bunu yapabilir miyim, bu yüzden sadece DOM'a bir kez başvurmak zorundayım?

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

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

Teşekkürler!

Answer 1

Birlikte hem bağlanabilen bir olay devlete incidating küresel değişkeni var ve event.type kontrol etmek: urn nesneler, bunları birlikte zincir böylece :

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

Veya, onları ayrı tutmak istiyorsanız, .on bir olay harita alır başka sözdizimi vardır:

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

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

Answer 2

Kontrol dışarı aynıdır jQuery hover:

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

GÜNCELLEME: Sadece üzerinde() yöntemi ile olayları devam gerek fark etti. Bu durumda, şöyle bir olay haritayı kullanabilirsiniz:

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

Answer 3

Şunu da deneyebilirsiniz:

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

güncellemesini ve düzeltme

Eğer daha dinamik bir kilide ihtiyacın fark hangi durumda Jonathan Lonowski'nin ya da Derek Hunziker'in mükemmel olduğu

Answer 4

Neredeyse tüm jQuery yöntemleri 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'; 
}); 

ama onun genellikle iyi bir fikir değil

Answer 6

Yeni başlayanlar için, öğelerinizi belge yerine seçebilirsiniz. Bu değerini doğru değere ayarlanmış mouse_is_inside değişkeni tutmalı fare dışarı veya gider her zaman, boşa çıkaracak

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

Böyle bir kısayol gösterimini deneyebilirsiniz

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

... .