Question

152

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

rated 0 times [ 155] [ 3] / answers: 1 / hits: 42190 / 12 Years ago, wed, march 21, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

christianu

Add To Favorites

Follow

Total Points: 481

Total Questions: 124

Total Answers: 99

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

2 Years ago

christianu questions

1 Having a trouble with Google OAuth2 (app has no backend, so client side only)

Mon, May 9, 22, 00:00, 2 Years ago

1 Change Icon on click with JS

Thu, Mar 10, 22, 00:00, 2 Years ago

1 Svelte: is there a way to cache the api result in a way that it won't trigger the api call everytime the component renders?

Sun, Sep 27, 20, 00:00, 4 Years ago

1 Javascript / React use of square brackets

Sun, Jul 5, 20, 00:00, 4 Years ago

1 Cannot POST to Express router (404 error)

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 12 Years ago rashawn · Accepted Answer

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