jQuery：是否有机会检测到鼠标从哪一侧输入的div中没有"；抵销；方法？

有没有办法检测鼠标光标来自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，但在Y轴上只移动了-3px。问题是，当X和Y几乎相同时，我不知道鼠标是从左还是从上（例如）

另外，根据我的另一个问题（），由于浏览器/操作系统的限制，事件不会在div一侧的第一个像素处触发。因此，我的“输入位置”坐标并不准确-例如：

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

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

您好，

---

Patrick

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

JSFIDLE，由牙买加国旗提供。

---

下面是脚本的正确/有效示例，包括对绝对定位div的修复。再次感谢你的帮助，图里亚格

jsfiddle：

脚本：

$(function() {
    $("img").hover(function(e) {
        var el_pos = $(this).offset();
        var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
        log('entered at: '+edge);
    }, function(e) {
        var el_pos = $(this).offset();
        var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
        log('left at: '+edge+'<br><br>');
    });
});

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 log(msg) {
    $("#console").append("<pre>" + msg + "</pre>");
}

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

$（函数（）{
$（“img”）。悬停（函数（e）{
var el_pos=$（this）.offset（）；
var edge=closestEdge（e.pageX-el_pos.left，e.pageY-el_pos.top，$（this）.width（），$（this.height（））；
日志（'输入位置：'+边缘）；
}，功能（e）{
var el_pos=$（this）.offset（）；
var edge=closestEdge（e.pageX-el_pos.left，e.pageY-el_pos.top，$（this）.width（），$（this.height（））；
日志（'left at:'+edge+'

'）；
});
});
函数闭合边缘（x、y、w、h）{
var topEdgeDist=距离（x，y，w/2,0）；
var bottomEdgeDist=距离（x，y，w/2，h）；
var leftEdgeDist=距离度量（x，y，0，h/2）；
var rightEdgeDist=距离（x，y，w，h/2）；
var min=Math.min（TopEdgeList、BottomEdgeList、LeftEdgeList、RightEdgeList）；
开关（最小值）{
案例左侧编辑：
返回“左”；
案例右侧编辑：
返回“正确”；
案例主题专家：
返回“顶部”；
案例底部编辑：
返回“底部”；
}
}
函数日志（msg）{
$（“#控制台”）.append（“+msg+”）；
}
函数距离（x，y，x2，y2）{
var xDiff=x-x2；
var-yDiff=y-y2；
返回（xDiff*xDiff）+（yDiff*yDiff）；
}

我对这段代码有一些问题，当在矩形上操作时，我发现它会错误地将一条边标识为应该位于顶部的右边。我花了一些时间想出了一个答案，我想与大家分享一下：

// Pass object offsetX,offsetY,width,height
function closestEdge(distLeft,distTop,w,h){
    var distBottom = (h - distTop);
    var distRight = (w - distLeft);
    var min = Math.min(distTop, distBottom, distLeft, distRight);
    switch (min) {
        case distLeft:
            return "left";
        case distRight:
            return "right";
        case distTop:
            return "top";
        case distBottom:
            return "bottom";
    }
}

---

信用证：

牙买加国旗小提琴中的最近边函数并没有达到它所能达到的效果，并且对于某些元素来说是不准确的。我们可以使用

offsetX

和

offsetY

来模拟函数并消除

distMetric

函数：

$('.btn').on('mouseenter',function(e){
    var edge = closestEdge(e.offsetX, e.offsetY, $(this).width(), $(this).height());
});

例如：

这里有一个插件

:

希望能对您有所帮助。

我改进了使用jQuery函数的解决方案，使之具有更加优雅和健壮的自定义jQuery函数

以下是：

$（函数（）{
$（'img'）.hover（函数（事件）{
日志（'在：'+$（this）.getMouseSide（事件）处输入）
}，功能（事件）{
日志（'left at:'+$（this）.getMouseSide（event）+'

'
})
$.fn.getMouseSide=函数（事件）{
函数距离度量（x，y，x2，y2）{
返回Math.pow（x-x2，2）+Math.pow（y-y2，2）
}
函数闭合边缘（x、y、w、h）{
var edgeDistance={
顶部：距离度量（x，y，w/2，0）
，底部：距离度量（x，y，w/2，h）
，左：距离度量（x，y，0，h/2）
，右：距离度量（x，y，w，h/2）
}
，EdgeInstances=$.map（EdgeInstance，函数（值）{
返回[值]
})
返回Object.keys（EdgeInstance）[
美元伊纳雷(
Math.min.apply（null，EdgeInstances）
，边缘位置
)
]
}
当前变量=$（此）
，elementOffset=current.offset（）
返回闭合边缘(
event.pageX-elementOffset.left
，event.pageY-elementOffset.top
，current.width（）
，current.height（）
)
}
})
功能日志（消息）{
$（'#控制台'）。追加（''+消息+''）
}

在使用偏移量之前，我尝试过pageX/pageY方法，但是（如果我错了，请纠正我），使用pageX或offsetX没有区别（我的计算不同，但我认为结果不一样），只是为了解释我的意思：我需要一个起点，一个终点来计算鼠标移动的方式。但是，如果因为我移动鼠标太快而在div中的+15px（x轴）上识别出起始点，那么如果我在捕捉到起始点后向左移动鼠标光标，则结束点可能为负值…jQuery的文档警告使用offsetX和clientX：可以使用.clientX、.offsetX和.pageX等属性，但不同浏览器对它们的支持不同。幸运的是，jQuery

// Pass object offsetX,offsetY,width,height
function closestEdge(distLeft,distTop,w,h){
    var distBottom = (h - distTop);
    var distRight = (w - distLeft);
    var min = Math.min(distTop, distBottom, distLeft, distRight);
    switch (min) {
        case distLeft:
            return "left";
        case distRight:
            return "right";
        case distTop:
            return "top";
        case distBottom:
            return "bottom";
    }
}

$('.btn').on('mouseenter',function(e){
    var edge = closestEdge(e.offsetX, e.offsetY, $(this).width(), $(this).height());
});

$(function () {
    $('img').hover(function (event) {
        log('entered at: ' + $(this).getMouseSide(event))
    }, function (event) {
        log('left at: ' + $(this).getMouseSide(event) + '<br><br>')
    })

    $.fn.getMouseSide = function (event) {
        function distanceMetric(x, y, x2, y2) {
            return Math.pow(x - x2, 2) + Math.pow(y - y2, 2)
        }

        function closestEdge(x, y, w, h) {
            var edgeDistance = {
                top:        distanceMetric(x, y, w / 2  , 0)
                , bottom:   distanceMetric(x, y, w / 2  , h)
                , left:     distanceMetric(x, y, 0      , h / 2)
                , right:    distanceMetric(x, y, w      , h / 2)
            }
            , edgeDistances = $.map(edgeDistance, function (value) {
                return [value]
            })

            return Object.keys(edgeDistance)[
                $.inArray(
                    Math.min.apply(null, edgeDistances)
                    , edgeDistances
                )
            ]
        }

        var current = $(this)
        , elementOffset = current.offset()

        return closestEdge(
            event.pageX - elementOffset.left
            , event.pageY - elementOffset.top
            , current.width()
            , current.height()
        )
    }
})

function log(message) {
    $('#console').append('<pre>' + message + '</pre>')
}