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

Question

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

先感谢您.

Answer 1

您可以检查事件对象的pageX和pageY属性，并将它们与相关元素的维度进行比较（例如，根据需要添加/添加/ ）。offsetouterWidthouterHeight

Answer 2

使用jQuery,您可以使用事件的offsetX属性:

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

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