У меня есть ряд элементов (назовем их ".my-элементами" ) - некоторая загрузка документа готова, а другие загружаются позже через разбиение на страницы script.
Я хотел бы установить переменную в зависимости от того, находится ли над этими элементами мышь. Код ниже работает, но я подозреваю, что есть лучший способ... Могу ли я это сделать, поэтому мне нужно только один раз обратиться к DOM?
$(document).on('mouseenter','.my-elements', function(){
mouse_is_inside = true;
});
$(document).on('mouseleave','.my-elements', function(){
mouse_is_inside = false;
});
Спасибо!
Вы можете связать оба вместе и проверить 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');
Отметьте jQuery hover, который совпадает с:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
ОБНОВЛЕНИЕ: Я просто понял, что вам нужно сохранить события с помощью метода on(). В этом случае вы можете использовать карту событий так:
.on({
mouseenter: function() {
console.log('enter');
},
mouseleave: function() {
console.log('bye!');
}
})
Почти все методы jQuery возвращают объекты, поэтому вы можете связать их вместе:
$(document).on('mouseenter','.my-elements', function(){
mouse_is_inside = true;
}).on('mouseleave','.my-elements', function(){
mouse_is_inside = false;
});
Вы также можете попробовать:
$(".my-elements").hover(function(eIn) {
// do work for mouse over
},
function(eOut) {
// do work for mouse out
});
обновление и исправление
понял, что вам нужен более динамичный замок, и в этом случае Джонатан Лоновски или Дерек Хунцикер совершенен
Для начала вы можете выбрать для своих элементов вместо документа.
$('.my-elements').on('mouseenter', function(){
mouse_is_inside = true;
});
Вы можете попробовать ярлык, обозначающий это...
$('.my-elements').on('mouseenter mouseleave', function(){
mouse_is_inside = !mouse_is_inside;
});
Это будет отрицать значение каждый раз, когда мышь входит или выходит, что должно держать переменную mouse_is_inside в правильном значении.
$('.my-elements').on('mouseenter mouseleave', function(event){
mouse_is_inside = event.type === 'mouseenter';
});
но, как правило, не рекомендуется иметь глобальную переменную, которая может вызывать событие события