CODEWITHSUNDEEP
jquerymouseenter
totallyNotLizards
totallyNotLizards

Reputation: 8569

jQuery how to prevent mouseenter triggering when page loads with cursor hovering element

I have an element on my page with a mouseenter event bound to it which changes the dimensions of a child image.

It works just as I want, however if you hit the page with your cursor hovering where the div will be, it triggers as soon as it loads - this is undesired, I want it to do nothing until a mouse cursor actualy enters the div rather than just being there to start with.

I've tried knocking up an example on jsfiddle but the page loads too quickly for me to get the cursor in the right place :(

One possibility is putting the bind method calls in a timeout so that it takes a second to bind the event, but the problem will still happen if the user leaves their cursor over my div.

Any ideas?

Using jQuery 1.6.2

Upvotes: 4

Views: 2297

Answers (2)

Mike
Mike

Reputation: 1266

My working solution is:

    var mouseenterno = 0;

    $('.selector').on('mouseenter', function() {

       //your code here

        mouseenterno = mouseenterno + 1;

    });

    $('.selector').on('mouseleave', function() {

        if (mouseenterno >= 1){

           //your code here

        }

    });

Upvotes: 0

Ernestas Stankevičius
Ernestas Stankevičius

Reputation: 2493

Hm. Its only idea.

var mouse_already_there = false;
var event_set = false;
$(document).ready(function() {
    $(item).hover(function(){
        if(!event_set) { mouse_already_there = true; }
    }, function(){
        if(!event_set) { mouse_already_there = false; }
    });
    if(mouse_already_there) {
        //do nothing
    } else {
        event_set = true;
        //set event
    }
});

Upvotes: 8

Related Questions