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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

用法：

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

Answer 3

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

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

然后你的function很简单

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

Answer 4

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

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