如何检查光标是否在元素上？

How can I check whether the cursor is over a div on the html page with JQuery/Javascript?

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

I'm trying to get cursor coordinates to see if they are in the rectangle of my element. Maybe there are predefined methods?

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

UPD, don't say anything about hover events, etc. I need some method which will return true/false for some element at the page, like:

UPD，不要说悬停事件等等。我需要一些方法，它会返回页面上某些元素的true / false，如：

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

5 个解决方案

#1

I'm not really sure why you wish to avoid hover so badly: consider the following script

我不确定你为什么要避免如此糟糕地悬停：考虑下面的脚本

$(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
    }
});

Basically the idea is that you use hover to set a flag on the element that the mouse is over it/no longer over it. And then you write a function that checks for that flag.

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

#2

For the sake of completeness I will add a couple of changes that I believe will help a bit for performance.

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

Use delegation to bind the event to one element, instead of binding it to all existent elements.

使用委托将事件绑定到一个元素，而不是将其绑定到所有现有元素。
```
$(document).on({
  mouseenter: function(evt) {
    $(evt.target).data('hovering', true);
  },
  mouseleave: function(evt) {
    $(evt.target).data('hovering', false);
  }
}, "*");
```

Add a jQuery pseudo-expression :hovering.

添加一个jQuery伪表达式：悬停。

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

Usage:

用法：

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

#3

The simplest way would probably be to just track which element the mouse is over at all times. Try something like:

最简单的方法可能是始终跟踪鼠标所在的元素。尝试以下方法：

<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);
    });
});

and then your function is simply

然后你的功能很简单

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

#4

Can't you just check $(select).is(':hover') ?

你不能只检查$（select）.is（'：hover'）吗？

#5

I did this with custom function:

我用自定义函数做了这个：

$(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))
 }

#1