jQuery:是否有机会在没有 "Offset"方法的情况下检测鼠标从哪一侧进入 div？

Question

有没有办法检测鼠标光标来自 div 的哪一侧？

目前我正在使用这种方法:

jQuery(this).bind('mousemove',function(e){
    offset_pos_x = parseInt(e.offsetX);
    offset_pos_y = parseInt(e.offsetY);
    ...

然后我查找鼠标在 div 内移动的距离(朝哪个方向)。

问题是，这个方法有点错误，因为我需要所有 4 个边，而不仅仅是两个，所以我必须检查 offsetX 和 offsetY。

如果我在 div 内移动鼠标，例如 X:+15,Y:-3(以像素为单位)，我知道鼠标来自左侧，因为鼠标在 x 轴上移动了 15px，但在 x 轴上仅移动了 -3px y 轴。问题在于，当 X 和 Y 几乎相同时，我不知道鼠标是来自左侧还是顶部(例如)。

另外，根据我的另一个问题( jQuery: mouseenter/mousemove/mouseover not recognized with small div and fast mouse movement )，由于浏览器/操作系统的限制，该事件不会在 div 一侧的第一个像素上触发。因此，我的“entered_at”坐标并不那么准确 - 例如:

如果我在 div 内快速移动鼠标光标(从左侧)，则“entered_at”坐标位于 x:17,y:76 处。现在，如果我在停止鼠标后将鼠标向左移动，例如 x:6,y:76，则起点和 offsetX 之间的差为负数，因此会触发“光标来自右侧”功能...

还有其他方法可以检测鼠标光标来自哪一侧吗？

您好， 帕特里克

Answer 1

我不会使用偏移量，而是使用 pageX/pageY (jQuery 标准化这些)。如果光标的第一个鼠标移动事件比任何其他边缘更靠近左边缘，则它来自左侧。您还可以考虑使用悬停事件，而不是 mousemove。

JSFiddle，由牙买加国旗提供。 http://jsfiddle.net/MJTkk/1/

function closestEdge(x,y,w,h) {
        var topEdgeDist = distMetric(x,y,w/2,0);
        var bottomEdgeDist = distMetric(x,y,w/2,h);
        var leftEdgeDist = distMetric(x,y,0,h/2);
        var rightEdgeDist = distMetric(x,y,w,h/2);
        var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
        switch (min) {
            case leftEdgeDist:
                return "left";
            case rightEdgeDist:
                return "right";
            case topEdgeDist:
                return "top";
            case bottomEdgeDist:
                return "bottom";
        }
}

function distMetric(x,y,x2,y2) {
    var xDiff = x - x2;
    var yDiff = y - y2;
    return (xDiff * xDiff) + (yDiff * yDiff);
}