Javascript 如何检查光标是否位于元素上？

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

div

上

我试图获取光标坐标，以查看它们是否位于元素的矩形中。也许有预定义的方法

UPD，不要说任何关于

悬停

事件等的内容。我需要一些方法，可以为页面上的某些元素返回true/false，例如：

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

---

我不太清楚为什么你希望避免如此严重的盘旋：考虑下面的脚本

$(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在元素上设置一个标志，表示鼠标在它上面/不再在它上面。然后编写一个函数来检查该标志。

最简单的方法可能就是一直跟踪鼠标在哪个元素上。尝试以下方法：

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

---

你能不能只选中$（select）.is（“：hover”）？

我用自定义函数实现了这一点：

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

$（文档）.mouseup（函数（e）{
if（在元素（“myelement”，e）下）{
警报（“单击元素内部”）；
}
});
要素下的功能（要素，e）{
var elemWidth=$（elem）.width（）；
var elemHeight=$（elem）.height（）；
var elemPosition=$（elem.offset（）；
var elemPosition2=新对象；
elemPosition2.top=elemPosition.top+elemHeight；
elemPosition2.left=elemPosition.left+elemWidth；
返回（（e.pageX>elemPosition.left&&e.pageXelemPosition.top&&e.pageY

为了完整起见，我将添加一些更改，我相信这些更改将对性能有所帮助

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

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

添加jQuery伪表达式

：悬停

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

用法：

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

---

无论您想要标题是什么，

hover

是此处的跨浏览器选项，

mouseover

或

mouseenter

是跟踪悬停元素的最简单跨浏览器方式。另外，你的措辞有点不对劲，鼠标从不在元素下，而是在元素上。如果你不使用“悬停”，你怎么知道鼠标进入了你的框？…@Reigel，看看鼠标坐标和div位置。@NickCraver:检查光标坐标可能是必要的。例如，如果您添加位于光标下的元素，则在用户移动鼠标之前，

mouseover

/

mouseenter

事件不会在元素上触发。+1我非常喜欢此解决方案。难道你不需要

return$（选择器）.data（'hover'）但在结尾？这不是一个完整的答案：如何初始化“悬停”开始在指针进入或退出元素的边界之前，“hover”是未知的；为此，假设指针在初始化时位于元素外部。”光标在元素上的每次移动都会触发“悬停”，而不仅仅是在回车时。尽管如此，仍然存在一个非常小的情况，即需要知道指针在初始化时的位置而不移动它。但这不是我的问题。这是我丢失的拼图中该死的一块。加上mouseleave而不是mouseout，我觉得我开始控制悬停事件。你可能想限制这些功能，在一个有很多元素的页面上实现这些功能可能会导致性能问题。众所周知，
*
选择器的速度很慢，启动大量侦听器可能会使情况变得更糟。向下投票可以节省人们的时间，因为jQuery 1.8及更新版本不再提供此解决方案。jQuery 1.8已弃用
.is（':hover'）
：。
var isHovering = $('#someDiv').is(":hovering");