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

Question

有没有快速& 我缺少在 jQuery 中执行此操作的简单方法吗？

我不想使用鼠标悬停事件，因为我已经将其用于其他用途。 我只需要知道鼠标在给定时刻是否位于某个元素上。

我想做这样的事情，如果有一个“IsMouseOver”函数：

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

Answer 1

感谢你们俩。 在某些时候，我不得不放弃尝试检测鼠标是否仍在元素上方。 我知道这是可能的，但可能需要太多代码才能完成。

我花了一些时间，但我采纳了你们的建议，并想出了一些对我有用的东西。

这是一个简化的（但功能性的）示例：

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

然后，为了在某些文本上工作，这就是我所要做的：

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

除了大量精美的 CSS 之外，这还允许一些非常好的鼠标悬停帮助工具提示。 顺便说一句，我需要鼠标移开时的延迟，因为复选框和文本之间的微小间隙会导致当您移动鼠标时帮助信息会闪烁。 但这就像一个魅力。 我还为焦点/模糊事件做了类似的事情。

Answer 2

我经常看到超时用于此目的，但是在事件的上下文中，您不能像这样查看坐标吗？：

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

根据上下文，您可能需要在调用 areXYInside 之前确保 (this==e.target) (e).

仅供参考-我正在考虑在dragLeave处理程序中使用这种方法，以确认dragLeave事件不是通过进入子元素而触发的。 如果您不以某种方式检查您是否仍在父元素内，则可能会错误地执行仅在您真正离开父元素时才有意义的操作。

编辑：这是一个好主意，但效果不够一致。 也许需要一些小的调整。

Answer 3

您可以使用 jQuery 测试任何子 div 是否具有特定的类。 然后，当您将鼠标悬停在某个 div 上并移出某个 div 时，通过应用该类，您可以测试鼠标是否位于该 div 上，即使您将鼠标悬停在页面上的其他元素上也是如此，这样可以减少代码量。 我使用它是因为弹出窗口中的 div 之间有空格，并且我只想在离开弹出窗口时关闭弹出窗口，而不是当我将鼠标移到弹出窗口中的空格上时关闭弹出窗口。 因此，我在内容 div 上调用了鼠标悬停函数（弹出窗口已结束），但只有当我将鼠标悬停在内容 div 上且位于弹出窗口之外时，它才会触发关闭函数！

$(".pop-up").mouseover(function(e)
    {
    $(this).addClass("over");
    });

$(".pop-up").mouseout(function(e)
    {
    $(this).removeClass("over");
    });


$("#mainContent").mouseover(function(e){
            if (!$(".expanded").hasClass("over")) {
            Drupal.dhtmlMenu.toggleMenu($(".expanded"));
        }
    });

Answer 4

这将是最简单的方法！

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

Answer 5

这是一种不依赖 jquery 并使用本机 DOM matches 的技术 API。 它使用供应商前缀来支持可追溯到 IE9 的浏览器。 请参阅 caniuse.com 上的 matchesselector 了解完整详细信息。

首先创建 matchesSelector 函数，如下所示：

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

然后，检测悬停：

var mouseIsOver = matchesSelector(element, ':hover');

Answer 6

我已经在另一个问题中回答了这个问题，并提供了您可能需要的所有详细信息：

使用 jQuery 检测 IF 悬停在元素上（在撰写本文时有 99 个赞成票）

基本上，您可以执行以下操作：

var ishovered = oi.is(":hover");

仅当 oi 是包含单个元素的 jQuery 对象时才有效。 如果有多个元素匹配，则需要应用于每个元素，例如：

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

This was tested opening jQuery 1.7.

Answer 7

这是一个可以帮助您检查鼠标是否位于元素内部的函数。 您唯一应该做的就是调用可以拥有与鼠标相关的实时事件对象的函数。 像这样的东西：

$("body").mousemove(function(event){
     element_mouse_is_inside($("#mycontainer", event, true, {});
});

您可以在 github 或帖子底部看到源代码：

https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js

function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
    if(!with_margin)
    {
        with_margin = false;
    }
    if(typeof offset_object !== 'object')
    {
        offset_object = {};
    }
    var elm_offset = elementToBeChecked.offset();
    var element_width = elementToBeChecked.width();
    element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
    element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
    var element_height = elementToBeChecked.height();
    element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
    element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
    if( with_margin)
    {
        element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
    }

    elm_offset.rightBorder = elm_offset.left+element_width;
    elm_offset.bottomBorder = elm_offset.top+element_height;

    if(offset_object.hasOwnProperty("top"))
    {
        elm_offset.top += parseInt(offset_object.top);
    }
    if(offset_object.hasOwnProperty("left"))
    {
        elm_offset.left += parseInt(offset_object.left);
    }
    if(offset_object.hasOwnProperty("bottom"))
    {
        elm_offset.bottomBorder += parseInt(offset_object.bottom);
    }
    if(offset_object.hasOwnProperty("right"))
    {
        elm_offset.rightBorder += parseInt(offset_object.right);
    }
    var mouseX = mouseEvent.pageX;
    var mouseY = mouseEvent.pageY;

    if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
        && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
    {
        return true;
    }
    else
    {
        return false;
    }
}

Answer 8

扩展“Happytime harry”所说的内容，请务必使用 .data() jquery 函数来存储超时 id。 这样，当稍后在同一元素上触发“mouseenter”时，您可以非常轻松地检索超时 ID，从而消除工具提示消失的触发器。

Answer 9

您可以使用 jQuery 的 mouseenter 和 mouseleave 事件。 您可以在鼠标进入所需区域时设置一个标志，并在鼠标离开该区域时取消设置该标志。

Answer 10

我结合了这个主题的想法并提出了这个，这对于显示/隐藏子菜单很有用：

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

似乎对我有用。 希望这对某人有帮助。

编辑：现在意识到这种方法在 IE 中无法正常工作。

Answer 11

我无法使用上面的任何建议。
为什么我更喜欢我的解决方案？
此方法检查鼠标是否在您选择的任何时间位于某个元素上。
Mouseenter 和 :hover 很酷，但是 mouseenter 仅在您移动鼠标时触发，而不是在元素在鼠标下方移动时触发。
:hover 非常可爱，但是...IE

所以我这样做：

否 1. 每次需要时移动鼠标时存储鼠标 x, y 位置，
否 2. 检查鼠标是否位于与查询匹配的任何元素上，执行操作...例如触发 mouseenter 事件

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

Answer 12

请注意上面流行且有用的 Arthur Goldsmith 答案：如果您将鼠标从 IE 中的一个元素移动到另一个元素（至少在 IE 9 之前），如果新元素具有透明背景（默认情况下）。 我的解决方法是为新元素提供透明的背景图像。

Answer 13

$(document).hover(function(e) {
    alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});

---

FIDDLE

Answer 14

使用 evt.originalEvent.composedPath()

MouseEvent 给出鼠标最近与之交互的 HTMLElement 数组。 最后一个元素是最外层的（即它始终是Window）。

MouseEvent composedPath() 示例如下：

通过检查此数组中是否存在可点击元素，您将知道是否有鼠标悬停在特定元素上...

$(window).on("mouseup", onMouseUp);
const $someButton = $("a.yourButton");

function onMouseUp(evt) {
  const path = evt.originalEvent.composedPath();
  if(path.indexOf($someButton[0]) !== -1){
    // released mouse over button
  }else{
    // did not release mouse over button
  }
}

Answer 15

对于像我这样需要不依赖于浏览器鼠标悬停/输入/离开事件或悬停状态的答案的人。 我在主页滑块中遇到了一种情况，左右滑动单击区域可能会重叠（或有时完全覆盖）横幅中的 CTA 按钮 - 这使得所有以前的方法都无用（浏览器仅报告元素上的事件）最高 z 指数）。 我的任务是让点击事件更多地关注按钮而不是点击按钮时的横幅功能。

我的完整解决方案如下所示：

jQuery('.carousel-control-prev').on('click.testClick', function(e) {
    var bannerButtons = jQuery('.banner-content a');
    for (var i = 0; i < bannerButtons.length; i++) {
        if (isMouseOver(bannerButtons.eq(i), e)) {
            e.preventDefault();
            e.stopPropagation();
            bannerButtons[i].click();
        }
    }
});

function isMouseOver($el, e) {
    if ($el.is(':visible')) {
        var offset = $el.offset();
        var x = (e.pageX - offset.left);
        var y = (e.pageY - offset.top);
        if (x > 0 && x < $el.outerWidth() && y > 0 && y < $el.outerHeight()) {
            return true;
        }
    }
    return false;
}

这可能需要更多的工作和测试，但现在它可以满足我的需要 - 在本例中是拦截横幅左键单击，检查鼠标是否恰好位于 CTA 上按钮，如果有，请点击 CTA 而不是横幅导航。

我完全理解更好的解决方案是重新设计横幅区域，这样就根本不会发生这种情况，但设计超出了我的控制范围。

Answer 16

您可以在 jquery 中使用 is(':visible');
对于 $('.item:hover') 它也可以在 Jquery 中工作。

这是一个 htm 代码 snnipet ：

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

这是 JS 代码：

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

这就是我所说的:)

Answer 17

干净优雅的悬停检查：

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

Answer 18

这段代码说明了我和 happytime harry 想要表达的意思。 当鼠标进入时，会出现一个工具提示，当鼠标离开时，会设置一个延迟使其消失。 如果鼠标在延迟触发之前进入相同的元素，那么我们会使用之前存储的数据在触发器关闭之前销毁触发器。

$("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 19

警告：is(':hover') 在 jquery 1.8+ 中已弃用。 请参阅这篇文章获取解决方案.

您还可以使用此答案：https://stackoverflow.com/a/6035278/8843测试鼠标是否悬停在元素上：

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

Answer 20

在鼠标移出时设置超时以淡出并将返回值存储到对象中的数据中。 然后onmouseover，如果数据中有值则取消超时。

删除淡出回调中的数据。

实际上，使用 mouseenter/mouseleave 更便宜，因为当子项 mouseover/mouseout 触发时，它们不会触发菜单。

Answer 21

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

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

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

Answer 22

我需要完全像这样的东西（在更复杂的环境中，并且带有大量“mouseenters”和“mouseleaves”的解决方案无法正常工作），所以我创建了一个小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 23

在 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 24

我采纳了 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 25

仅供未来发现者参考。

我制作了一个 jQuery 插件，可以做到这一点以及更多。 在我的插件中，要获取光标当前悬停在其上的所有元素，只需执行以下操作：

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

正如我所提到的，它还有很多其他用途，如您在

在这里找到 jsFiddle< /a>

Answer 26

由于我无法发表评论，所以我将写此作为答案！

请理解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。 没有其他事件可以做到这一点
这。 共同选择“hover”名称：无法附加
名为“hover”的事件并使用 .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% 的情况都有另一种方法！

希望我能帮助一些人。

格雷兹·安迪