Объединение функций jquery - on() hover/mouseenter/mouseleave

У меня есть ряд элементов (назовем их ".my-элементами" ) - некоторая загрузка документа готова, а другие загружаются позже через разбиение на страницы script.

Я хотел бы установить переменную в зависимости от того, находится ли над этими элементами мышь. Код ниже работает, но я подозреваю, что есть лучший способ... Могу ли я это сделать, поэтому мне нужно только один раз обратиться к DOM?

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

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

Спасибо!

Ответ 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');

Ответ 2

Отметьте jQuery hover, который совпадает с:

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

ОБНОВЛЕНИЕ: Я просто понял, что вам нужно сохранить события с помощью метода on(). В этом случае вы можете использовать карту событий так:

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

Ответ 3

Почти все методы jQuery возвращают объекты, поэтому вы можете связать их вместе:

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

Ответ 4

Вы также можете попробовать:

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

но, как правило, не рекомендуется иметь глобальную переменную, которая может вызывать событие события