如何检查光标是否在元素上？ [复制]答案

【问题标题】：How to check if the cursor is over an element? [duplicate]如何检查光标是否在元素上？ [复制]
【发布时间】：2011-03-24 15:26:42
【问题描述】：

如何使用 JQuery/Javascript 检查光标是否位于 html 页面上的 div 上？

我正在尝试获取光标坐标以查看它们是否在我的元素的矩形中。也许有预定义的方法？

UPD，不要说hover 事件等。我需要一些方法来为页面上的某些元素返回真/假，例如：

var result = underElement('#someDiv'); // true/false

【问题讨论】：

不管你想要做什么，hover 是这里的跨浏览器选项，mouseover 或 mouseenter 是最简单的跨浏览器保存方式悬停元素的轨迹。此外，您的措辞有点偏离，鼠标永远不会在元素下，它在在它。
如果你不使用hover，你怎么知道鼠标进入了你的那个框？...
@Reigel，查看鼠标坐标，查看 div 位置。
I contributed a pseudo-expression for it hoping that that helps someone though
@NickCraver：检查光标坐标可能是必要的。例如，如果您添加一个位于光标下方的元素，则在用户移动鼠标之前，不会在该元素上触发 mouseover/mouseenter 事件。

标签： javascript jquery

【解决方案1】：

我不太确定你为什么要避免如此严重的悬停：考虑以下脚本

$(function(){

    $('*').hover(function(){
        $(this).data('hover',1); //store in that element that the mouse is over it
    },
    function(){
        $(this).data('hover',0); //store in that element that the mouse is no longer over it
    });


    window.isHovering = function (selector) {
        return $(selector).data('hover')?true:false; //check element for hover property
    }
});

基本上这个想法是你使用悬停在元素上设置一个标志，鼠标在它上面/不再在它上面。然后你编写一个函数来检查那个标志。

【讨论】：

+1 我非常喜欢这个解决方案。你最后不只需要return $(selector).data('hover');吗？
这不是一个完整的答案：您如何初始化“悬停”？在指针进入或退出元素边界之前，“悬停”是未知的。
啊，我的错；为了解决这个问题，假设指针在初始化时位于元素之外。 “悬停”将在指针在元素上的每次移动时触发，而不仅仅是在输入时。尽管这仍然留下了非常小的情况，即需要知道指针在初始化时的位置而不移动它。不过不是我的问题。
这是我所缺少的拼图中该死的一块。加上mouseleave而不是mouseout，我觉得我开始获得对悬停事件的控制。
您可能想要限制这些功能，在包含大量元素的页面上实现此功能时可能会导致性能问题。众所周知，* 选择器很慢，启动大量侦听器会使情况变得更糟。

【解决方案2】：

为了完整起见，我将添加一些我认为对性能有所帮助的更改。

使用委托将事件绑定到一个元素，而不是将其绑定到所有现有元素。

$(document).on({
  mouseenter: function(evt) {
    $(evt.target).data('hovering', true);
  },
  mouseleave: function(evt) {
    $(evt.target).data('hovering', false);
  }
}, "*");

添加一个jQuery伪表达式:hovering。

jQuery.expr[":"].hovering = function(elem) {
  return $(elem).data('hovering') ? true : false; 
};

用法：

var isHovering = $('#someDiv').is(":hovering");

【讨论】：

【解决方案3】：

最简单的方法可能是始终跟踪鼠标在哪个元素上。尝试类似：

<div id="1" style="border:solid 1px red; width:50px; height:50px;"></div>
<div id="2" style="border:solid 1px blue; width:50px; height:50px;"></div>
<div id="3" style="border:solid 1px green; width:50px; height:50px;"></div>

<input type="hidden" id="mouseTracker" />

$(document).ready(function() {
    $('*').hover(function() { 
        $('#mouseTracker').val(this.id);
    });
});

然后你的功能很简单

function mouseIsOverElement(elemId) {
    return elemId === $('#mouseTracker').val();
}

【讨论】：

【解决方案4】：

你不能只检查 $(select).is(':hover') 吗？

【讨论】：

拒绝投票可以节省人们的时间，因为这个解决方案不再是 jQuery 1.8 和更新版本的选项。 jQuery 1.8 已弃用 .is(':hover'): stackoverflow.com/a/12517725/5295.

【解决方案5】：

我用自定义函数做到了这一点：

$(document).mouseup(function(e) { 
     if(UnderElement("#myelement",e)) {
         alert("click inside element");
     }
});

function UnderElement(elem,e) {
     var elemWidth = $(elem).width();
     var elemHeight = $(elem).height();
     var elemPosition = $(elem).offset();
     var elemPosition2 = new Object;
     elemPosition2.top = elemPosition.top + elemHeight;
     elemPosition2.left = elemPosition.left + elemWidth;

     return ((e.pageX > elemPosition.left && e.pageX < elemPosition2.left) && (e.pageY > elemPosition.top && e.pageY < elemPosition2.top))
 }

【讨论】：