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

Question

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

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

UPD,不要说任何关于hover事件等等.我需要一些方法,它会返回页面上某些元素的true/false,如:

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

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

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

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