如何在jQuery中区分鼠标“移出”和“离开”事件的不同方向？

Question

是否有一种方法可以知道鼠标事件是否离开了元素的特定侧面？我的意思是，我有一个DIV绑定了mouseover/mouseenter事件，我只想在鼠标从DIV的左侧和右侧离开时触发操作，但如果从底部或顶部离开，则不应触发任何操作。

提前感谢您。

- steps

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或大于元素的宽度，则说明光标在离开元素边界时位于元素左侧或右侧之外。

- robmisio

---

这个在Javascript中的版本是什么？ - Teo Mihaila

Answer 2

您可以检查事件对象的pageX和pageY属性，并将它们与所讨论元素的尺寸进行比较(例如，使用offset并添加适当的outerWidth / outerHeight值)。

- T.J. Crowder

Answer 3

我知道这是一个旧问题，但我正在寻找类似的内容，用于悬停效果。我发现了 jquery.hoverdir，可能会很有用...

- Mr Jonny Wood

Answer 4

据我所知，这并不容易，但是它是可以完成的。

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

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

（该教程使用mousemove，但也适用于mouseenter/mouseleave）

- Ortiga

Answer 5

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

例如，当鼠标移出时，处理程序会定位元素在（x，y）->（10,10）处，高度为20，宽度为20。如果鼠标坐标大于X轴上的30且在Y轴上介于10和30之间，则鼠标已从右侧离开。

- RTulley