Объединение функций 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

можно привязать к обоим вместе и проверить 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 
}); 

обновление и исправление

понял, что вам нужно более динамичный замок в в каком случае Джонатан Лоновски или Дерек Хунцикер совершенен

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'; 
}); 

но в целом не очень хорошая идея, чтобы иметь глобальную переменную incidating это состояние событие с

Answer 6

Для начала вы можете выбрать для своих элементов вместо документа.

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

Вы можете попробовать контекстное обозначения, как это ...

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

Это сводит на нет значение, каждый раз, когда мышь уходит внутрь или наружу, который должен держать переменную mouse_is_inside установить на правильное значение ,