jQuery:有机会检测鼠标从哪一侧进入div而没有“偏移".方法? [英] jQuery: Any chance to detect from which side the mouse entered a div without the "Offset" Method?

问题描述

是否可以检测鼠标光标来自div的哪一侧?

Is there a way to detect from which side of a div the mouse cursor came from?

当前我正在使用此方法:

Currently i'm using this method:

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

然后我寻找鼠标在div内沿哪个方向移动的距离.

Then i look for the distances the mouse went inside the div, in which direction.

问题是，此方法有点麻烦，因为我需要所有4个面，而不仅仅是两个，所以我必须检查offsetX和offsetY.

The Problem is, this method is a bit buggy because i need all 4 sides, not just two, so i have to check offsetX AND offsetY.

如果我在div内移动鼠标，例如X:+ 15，Y:-3(以像素为单位)，我就知道鼠标是从左侧来的，因为鼠标在x轴上移动了15px，但在x轴上只有-3px y轴.与此有关的有问题的事情是，当X和Y几乎相同时，我不知道鼠标是来自左侧还是顶部(例如).

If i move the mouse inside the div for example X:+15,Y:-3 (in Pixels) i know that the mouse came from left, because the mouse moved 15px on x-axis, but only -3px on y-axis. The buggy thing about this is, when X and Y are nearly the same and i don't know if the mouse came from left or top (for example).

另外，根据我的其他问题(

Also, according to my other Question (jQuery: mouseenter/mousemove/mouseover not recognized with small div and fast mouse movement) the Event isn't fired on the first Pixel of the div's side, because of browser/os limitations. Because of that, my "entered_at" coordinate isn't that accurate - example:

如果我在div内(从左向右)快速移动鼠标光标，则"entered_at"坐标为x:17，y:76.现在，如果我在停下鼠标后将鼠标左移，例如移至x:6，y:76，则起始点和offsetX之间的差为负，因此触发了光标来自右"功能...

If i move my mouse cursor very fast inside the div (from left), the "entered_at" coord is at x:17,y:76 for example. Now if i move my mouse to the left after stoping the mouse, for example to x:6,y:76 the difference between the starting point and offsetX is negative, so the "cursor came from right" function is triggered...

还有另一种方法可以检测鼠标光标来自哪一侧?

Is there another way to detect the side from which the mouse cursor came from?

问候， 帕特里克

推荐答案

我不会使用偏移量，而是使用pageX/pageY(jQuery将它们标准化).如果光标的第一个mousemove事件比任何其他边缘都更靠近左边缘，则它来自左边缘.您也可以考虑为此使用悬停事件，而不是使用mousemove.

I wouldn't use the offset, but rather pageX/pageY (jQuery normalizes these). If the cursor's first mousemove event was closer to the left edge than any other edge, it came from the left. You may also consider using the hover event for this, rather than mousemove.

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

JSFiddle, courtesy of the Jamaican flag. 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);
}

这篇关于jQuery:有机会检测鼠标从哪一侧进入div而没有“偏移".方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！