Combining jquery functions - on() hover/mouseenter/mouseleave

Question

I have a series of elements (lets call them '.my-elements') - some load on document ready, while others are loaded later via a pagination script.

I would like to set a variable according to whether or not the mouse is over these elements. The code below works, but I suspect there is a better way... Can I do this so I only have to reference the DOM once?

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

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

Thanks!

score 98 · Accepted Answer · answered Mar 21 '12 at 20:15

You can bind to both together and check the event.type:

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

Or, if you want to keep them separate, .on has another syntax that takes an event map:

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

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

Derek Hunziker · Answer 2 · 2012-03-21T20:25:24.510

8

Check out jQuery hover which is the same as:

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

UPDATE: I just realized you need to persist the events via the on() method. In that case, you can use an event map like so:

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

edited Mar 21 '12 at 20:25

answered Mar 21 '12 at 20:10

Derek Hunziker

12,996
4
57
105

score 6 · Answer 3 · answered Mar 21 '12 at 20:13

6

Almost all jQuery methods return objects, so you can chain them together:

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

answered Mar 21 '12 at 20:13

HellaMad

5,294
6
31
53

word of warning, this will not work with live since it is not chainable. – jbabey Mar 21 '12 at 20:27
NOTE: as of jQuery 1.9 `.live()` was removed – Mark Schultheiss May 26 '19 at 14:03

SpYk3HH · Answer 4 · 2012-03-21T20:26:30.023

2

You could also try:

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

update and correction

realized you need more dynamic lock in which case Jonathan Lonowski's or Derek Hunziker's is perfect

edited Mar 21 '12 at 20:26

answered Mar 21 '12 at 20:13

SpYk3HH

22,272
11
70
81

That will not work on the dynamically created elements. **Quote OP:** _"...some load on document ready, while others are loaded later..."_ – Sparky Mar 21 '12 at 20:17

score 1 · Answer 5 · answered Mar 21 '12 at 20:16

For starters, you can select for your elements instead of document.

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

You could try a shortcut notation like this...

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

This will negate the value every time the mouse goes in or out, which should keep the mouse_is_inside variable set to the right value.

worenga · Answer 6 · 2012-03-21T20:19:53.957

0

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

but its generally not a good idea to have a global variable incidating a event state

edited Mar 21 '12 at 20:19

answered Mar 21 '12 at 20:14

worenga

5,776
2
28
50

What are the issues with setting global variables as event state indicators? – Nicole Harris Mar 21 '12 at 20:48

Combining jquery functions - on() hover/mouseenter/mouseleave

6 Answers6

Linked

Related