11

这让我发疯。

只有当 div 通过其底部边框离开时，有没有办法触发 mouseleave jquery 效果？

也就是说，如果鼠标指针通过其他 3 个边框中的任何一个离开 div，则阻止上述效果发生。

我想这一定是某种坐标问题，但位置和偏移都不是我的答案。

如果可以做到这样的事情，那么将不胜感激只是关于如何做到这一点的最微小的例子。

如果已经提出（并回答）了类似的问题，那么任何重定向都将受到赞赏。

谢谢！

4

6 回答 6

19

这个怎么样：

$("div").mouseleave(function(e){
    var $this = $(this);

    var bottom = $this.offset().top + $this.outerHeight();

   if(e.pageY >= bottom) alert("BOTTOM"); 
});

http://jsfiddle.net/uqcU6/6/

于 2011-08-02T20:55:47.280 回答
2

对于 HTML

<div></div>

和 CSS

div {
    border:2px dashed lightblue;
    width:200px;
    height:200px;
    margin:20px 0 0 20px;
}

和 JavaScript

var divPosition = $('div').position();
var bottom = divPosition.top + $('div').height();
var left = divPosition.left;

$('div').mouseleave(function(e) {
    if (e.pageX > left && e.pageY > bottom) {
        console.log('bottom out');   
    }
});

或demo，只有当鼠标离开底部时才会出现控制台输出<div>

于 2011-08-02T21:04:39.080 回答
1

最简单的解决方案是使用包装器 div 并将mouseleave事件分配给包装器。

http://jsfiddle.net/AlienWebguy/TDCgM/

于 2011-08-02T20:52:34.583 回答
1

快速的解决方案是将透明 div 绝对定位到元素的底部，然后mouseenter在该 div 上侦听以触发mouseleave父 div 上的。

于 2011-08-02T20:52:56.430 回答
1

如果您无法添加另一个 div，另一种解决方案是获取相关 div 的底部 y 坐标。并检查鼠标是否低于 mouseleave 事件中的鼠标。您可能需要检查 x1 < xm < x2，其中 x1 是 div 的左 x 坐标，x2 是 div 的右 x 坐标，xm 是鼠标的 x 坐标。

@kingjiv 用一个代码示例击败了我，但边检查可能会改进整个事情。

于 2011-08-02T20:56:49.777 回答
1

在 mouseLeave 处理程序中添加一个条件语句，检查鼠标是否低于元素的底部。如果是，则鼠标很可能从底部边框退出。

例子：

$("#yourDiv").mouseleave(function(e){
  if (e.offsetY >= $("#yourDiv").height() ){
    alert("perform the mouse leave action!");
  }

});

于 2011-08-02T21:11:04.703 回答