jquery mouseleave 效果通过 div 的下边框

Posted 2023-03-06

【中文标题】jquery mouseleave 效果通过 div 的下边框

【英文标题】：Jquery mouseleave effect through div's bottom border

【发布时间】：2011-10-18 14:33:57

【问题描述】：

这让我发疯了。

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

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

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

如果可以完成类似的事情，我们将不胜感激提供最微小的示例。

如果已经提出（并回答）了类似的问题，我们也将不胜感激。

谢谢！

【问题讨论】：

哇，你们真的很快。太棒了。

我想是的，是的。我感谢已经给出的每一个答案。事实证明，它们都非常有用。

【参考方案1】：

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

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

【讨论】：

但是当鼠标向各个方向离开时会触发。 OP 想知道它是否在离开底部时触发。

【参考方案2】：

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

【讨论】：

我会试一试的。谢谢！

【参考方案3】：

这个怎么样：

$("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/

【讨论】：

实际上想要使用offset 而不是position，以防元素位于相对或绝对定位元素内。答案更新。

您可能想要使用outerHeight 而不是outerWidth，因为您现在拥有它的方式，它仅适用于正方形。叉你的小提琴：jsfiddle.net/hJCmB

我还提交了一个编辑，因为 outerWidth 应该是 outerHeight，在你的 jsfiddle 中这并不重要，因为它是一个正方形，如果你将它更改为一个矩形，你的代码会中断。

@Andrew 哈哈，谢谢，我猜打字太快了，我的大脑跟不上。

我意识到，一旦宽度和高度不相等，Andrew Peacock 就没有得到任何结果；使用 outerHeight 就可以了。但是你指出了我正确的方向，kingjiv，所以谢谢你们俩。

【参考方案4】：

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

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

【讨论】：

我已经尝试过类似的方法，但我想这并不像看起来那么容易:) 不过我会记住的。谢谢！

只需一个 event.x > left 和 event.y > bottom 即可，无需检查右坐标。

【参考方案5】：

对于 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>的底部时才会出现控制台输出

【讨论】：

我认为你想要pageY 而不是clientY。这仅在页面滚动到顶部时才有效。

也像魅力一样工作。非常感谢！

【参考方案6】：

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

示例：

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

);