最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Mousemove vs mouseover vs something else - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question edited Mar 6, 2019 at 11:03 Antti29 3,03112 gold badges36 silver badges36 bronze badges asked Nov 25, 2011 at 12:02 Toni Michel CaubetToni Michel Caubet 20.2k58 gold badges217 silver badges388 bronze badges 0
Add a ment  | 

2 Answers 2

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

发布评论

评论列表(0)

  1. 暂无评论