如何在jquery上并排区分mouseout/live事件

How to differ mouseout/leave events by side on jquery?

本文关键字：mouseout live 事件 排区 jquery      更新时间：2023-09-26

有没有办法知道鼠标事件是否从元素的特定一侧离开？我的意思是，我有一个带有mouseover/mousenter事件的DIV，只有当鼠标离开DIV的左侧和右侧时，我才想触发该动作，但如果它从底部或顶部离开，它不应该触发任何动作。

提前谢谢。

使用jQuery，您可以使用事件的offsetX属性，如下所示：

$('#element').mouseout(function(e) {
    if (e.offsetX < 0 || e.offsetX > $(this).width()) {
        alert('out the side!');
    }
});

我不认为该属性是可靠的跨浏览器（w/ojQuery），我相信jQuery将其规范化（我已经在Chrome和IE7-9中测试过它）。基本上，该属性包含触发事件时光标相对于目标元素的位置。如果该值小于0或大于元素的宽度，则表示光标离开元素边界时位于元素的左侧或右侧之外。

您可以检查事件对象的pageX和pageY属性，并将它们与相关元素的维度进行比较（例如，从offset添加outerWidth/outerHeight（视情况而定））。

我意识到这是一个老问题，但我一直在寻找类似的悬停效果。我发现jquery.haverdir

可能很方便。。。

这不是一个简单的方法，AFAIK，但它是可以做到的。

鼠标移出时，将鼠标位置与元素位置进行比较。

请参阅jQuery的鼠标位置教程：http://docs.jquery.com/Tutorials:Mouse_Position

（它在教程中使用mousemove，但也适用于mouseenter/mouseleve）

也许您可以使用mouseout jquery函数（或mouseleave？），并添加一个带有javascript的自定义处理程序，以获取元素的坐标、高度和宽度，并跟踪鼠标坐标是否超过您的边界。

即您的鼠标退出事件触发，处理程序将元素定位在（x，y）->（10，10），高度为20，宽度为20。如果鼠标坐标在X轴上大于30，在Y轴上介于10和30之间，则鼠标在右手边向左。

相关文章：