javascript - Mousemove vs mouseover vs 其他

Question

我需要将鼠标事件绑定(bind)到图像的某个区域。

想一想 Facebook 图片标签，当你将鼠标悬停在脸上时，它会显示你的名字。

我做了一个非常相似的东西，但是有 map 和城市名称，像这样:

$('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);
    }
});

这很好用，它显示了所需的标签(带有动画和东西)，但只有当鼠标在该区域移动时，所以如果你移动到该区域并将鼠标留在那里(因为它没有移动)它就会消失.

如果我使用 .bind('mouseover') 它将不起作用，因为当您将鼠标悬停在图像上时，它总是位于边缘之一。

你有什么建议？

Answer 1

您可以结合使用 mouseover 或 mouseenter 和 mousemove

http://api.jquery.com/mousemove/

http://api.jquery.com/mouseenter/

所以当 mouseenter -> mousemove

mouseleave -> 什么都不做？

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

function someFunc() {
DO YOUR MOUSEMOVE THINGS
}