javascript - Mousemove vs mouseover vs something else - Stack Overflow

admin管理员组

文章数量:1316023

I need to bind a mouse event to an area of an image.

Just think of the Facebook picture tag for a second, when you hover the face, it shows you the name.

I made a very similar thing but with maps and city names, like this:

$('img#mapaMundi').bind('mousemove', function(e) {
    x = getX();
    y = getY();
    var found = find(x, y);

    if (found == undefined) {
        console.log('There is no tagged city for this position');
    } else {
        show(found);
    }
});

And this works great, it shows the desired tag (with animation and stuff) but only while mouse is moved in the area, so if you move to the area and leave the mouse there (as it's not moving) it will dissapear.

If I use .bind('mouseover') it won't work because when you hover the image it's always in one of the edges.

What would you suggest?

I need to bind a mouse event to an area of an image.

Just think of the Facebook picture tag for a second, when you hover the face, it shows you the name.

I made a very similar thing but with maps and city names, like this:

$('img#mapaMundi').bind('mousemove', function(e) {
    x = getX();
    y = getY();
    var found = find(x, y);

    if (found == undefined) {
        console.log('There is no tagged city for this position');
    } else {
        show(found);
    }
});

And this works great, it shows the desired tag (with animation and stuff) but only while mouse is moved in the area, so if you move to the area and leave the mouse there (as it's not moving) it will dissapear.

If I use .bind('mouseover') it won't work because when you hover the image it's always in one of the edges.

What would you suggest?

• javascript
• jquery
• events

Share Improve this question Follow edited Mar 6, 2019 at 11:03 Antti29 3,0311212 gold badges3636 silver badges3636 bronze badges asked Nov 25, 2011 at 12:02 Toni Michel CaubetToni Michel Caubet 20.2k5858 gold badges217217 silver badges388388 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can bine maybe mouseover or mouseenter and mousemove

http://api.jquery./mousemove/

http://api.jquery./mouseenter/

So when mouseenter -> mousemove

mouseleave -> do nothing?

var int = null;
$('#element').hover(function() {
int = setInterval(someFunc, 100);
}, function() {
clearInterval(int);
});

function someFunc() {
DO YOUR MOUSEMOVE THINGS
}

on mouseover setInterval with a function that will check mouse position each second, and on mouseout clear that interval

If you use jQuery, .hover() provides both mouseover and mouseout

本文标签： javascriptMousemove vs mouseover vs something elseStack Overflow