如何在jquery上区分mouseout / leave事件？

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

先感谢您。

Answer 1

使用jQuery，您可以使用事件的offsetX属性：

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

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

Answer 2

您可以检查事件对象的pageX和pageY属性，并将它们与相关元素的尺寸进行比较（例如，从offset添加并在适当时添加outerWidth / outerHeight ）。

Answer 3

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

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

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

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

Answer 4

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

即你的鼠标输出事件触发，处理程序将元素定位在（x，y） – >（10,10），高度为20，宽度为20.如果鼠标坐标大于30 X和Y之间的10到30之间，鼠标已经离开了右侧。

Answer 5

我意识到这是一个老问题，但我正在寻找类似用于hover效果的东西。 我找到了jquery.hoverdir

可以方便……