如何检查鼠标是否在jQuery中的元素上？

Question

有没有一种快速简便的方法在jQuery中做到这一点,我错过了？

我不想使用鼠标悬停事件,因为我已经将它用于其他事情.我只需要知道鼠标是否在给定时刻超过元素.

如果只有"IsMouseOver"功能,我想做这样的事情:

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}

Answer 1

这段代码说明了我想说的快乐时光.当鼠标进入时,工具提示出现,当鼠标离开时,它会设置延迟消失.如果鼠标在触发延迟之前输入相同的元素,那么我们会在使用之前存储的数据关闭之前销毁触发器.

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});

Answer 2

干净优雅的悬停检查:

if ($('#element:hover').length != 0) {
    // do something ;)
}

Answer 3

警告:is(':hover')在jquery 1.8+中已弃用.有关解决方案,请参阅此文章.

您也可以使用以下答案:https://stackoverflow.com/a/6035278/8843来测试鼠标是否悬停元素:

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

Answer 4

将mouseout上的超时设置为淡出并将返回值存储到对象中的数据.然后onmouseover,如果数据中有值,则取消超时.

删除淡出回调的​​数据.

使用mouseenter/mouseleave实际上更便宜,因为当孩子鼠标悬停/鼠标移动时它们不会触发菜单.

Answer 5

您可以使用jQuery的hover事件来手动跟踪:

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

Answer 6

我需要完全像这样的东西(在一个更复杂的环境中,有很多'鼠标'和'鼠洞'的解决方案没有正常工作)所以我创建了一个小的jquery插件,添加了方法ismouseover.到目前为止,它运作良好.

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

然后在文档的任何地方,你可以像这样调用它,它返回true或false:

$("#player").ismouseover()

我在IE7 +,Chrome 1+和Firefox 4上进行了测试,并且运行正常.

Answer 7

在jQuery中你可以使用.is(':hover'),所以

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

现在将是提供OP中所请求功能的最简洁方式.

注意:以上在IE8或更低版本中不起作用

作为在IE8中工作的不那么简洁的替代品(如果我可以信任IE9的IE8模式),并且不会触发$(...).hover(...)所有地方,也不需要知道元素的选择器(在这种情况下,Ivo的答案更容易):

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

Answer 8

我把SLaks的想法拿到了一个小课堂上.

function HoverWatcher(selector){
  this.hovering = false;
  var self = this; 

  this.isHoveringOver = function() { 
    return self.hovering; 
  } 

    $(selector).hover(function() { 
      self.hovering = true; 
    }, function() { 
      self.hovering = false; 
    }) 
} 

var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');



$('#container').click(function() {
  alert("box1.hover = " + box1Watcher.isHoveringOver() +
        ", box2.hover = " + box2Watcher.isHoveringOver());
});

Answer 9

仅仅是因为未来的发现者.

我制作了一个jQuery插件,可以做到这一点,还有更多.在我的插件中,要获取光标当前悬停的所有元素,只需执行以下操作:

$.cursor("isHover"); // will return jQ object of all elements the cursor is 
                     // currently over & doesn't require timer

正如我所提到的,它还有很多其他用途,你可以在中看到

jsFiddle在这里找到

Answer 10

由于我无法发表评论，所以我会写这个作为答案！

请理解css选择器":hover"和hover事件的区别！

":hover" 是一个 css 选择器，当像这样使用时确实被事件删除了$("#elementId").is(":hover")，但这意味着它与 jQuery 事件悬停实际上无关。

如果您编写代码$("#elementId:hover")，则只有在您用鼠标悬停时才会选择该元素。上面的语句将适用于所有 jQuery 版本，因为您使用纯合法的 css 选择来选择此元素。

另一方面，事件悬停是

$("#elementId").hover(
     function() { 
         doSomething(); 
     }
); 

确实被弃用为 jQuery 1.8 此处来自 jQuery 网站的状态：

当使用事件名称“hover”时，事件子系统将其转换为事件字符串中的“mouseenter mouseleave”。这很烦人，原因有几个：

语义：悬停与鼠标进入和离开元素不同，它意味着在触发之前一定程度的减速或延迟。事件名称：附加处理程序返回的 event.type 不是悬停，而是 mouseenter 或 mouseleave。没有其他事件会这样做。选择“悬停”名称：无法附加名称为“悬停”的事件并使用 .trigger(“hover”) 触发它。文档已经将这个名称称为“强烈反对新代码”，我想正式弃用 1.8 并最终将其删除。

为什么他们删除了使用 is(":hover") 尚不清楚，但是哦，你仍然可以像上面一样使用它，这里有一个小技巧仍然可以使用它。

(function ($) {
   /** 
    * :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover") 
    * but using it in this way it works as :hover is css selector! 
    *
    **/
    $.fn.isMouseOver = function() {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);

哦，我不会推荐超时版本，因为这会带来很多复杂性，如果没有其他方法，请对此类内容使用超时功能，相信我，在95% 的情况下，还有另一种方法！

希望我可以帮助那里的几个人。

格雷茨安迪