Question

我需要将鼠标事件绑定到图像区域。

只要想一下Facebook图片标签一秒钟，当你悬停脸部时，它会显示你的名字。

我做了一个非常相似的事情，但有地图和城市名称，如下：

$('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

on mouseover setInterval，其函数将每秒检查鼠标位置，并在mouseout上清除该间隔

如果您使用jQuery，.hover()同时提供mouseover和mouseout

Answer 2

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

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

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

所以当mouseenter - ＆gt;鼠标移动

mouseleave - ＆gt;什么都不做？

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

function someFunc() {
DO YOUR MOUSEMOVE THINGS
}

Mousemove vs mouseover与其他东西相比

2 个答案: