是否有一个快速和简单的方法来做到这一点在jQuery,我错过了?

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

我想做一些这样的事情,如果有一个“IsMouseOver”函数:

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

当前回答

这将是最简单的方法!

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

其他回答

谢谢你们俩。在某种程度上,我不得不放弃尝试检测鼠标是否仍然停留在元素上。我知道这是可能的,但可能需要太多的代码来实现。

我花了一点时间,但我接受了你们的建议,并想出了适合我的办法。

下面是一个简单的例子:

$("[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,这允许一些非常漂亮的鼠标悬停帮助工具提示。顺便说一下,我需要在鼠标退出时延迟,因为复选框和文本之间的微小间隙导致当你移动鼠标时帮助会闪烁。但这就像一个魔法。我也为焦点/模糊事件做了类似的事情。

这里有一个技术,它不依赖于jquery,并使用本机DOM匹配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');

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

使用 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
  }
}

因为我不能评论,所以我将写这作为一个答案!

请理解css选择器“:hover”和hover事件之间的区别!

":hover"是一个css选择器,当像这样使用$("#elementId").is(":hover")时,它确实与事件一起被删除了,但它的意思是它真的与jQuery事件无关。

如果你输入$("#elementId:hover"),元素只会在你用鼠标悬停时被选中。上面的语句将适用于所有jQuery版本,因为你选择这个元素与纯合法的css选择。

另一方面,事件悬停

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

在jQuery 1.8的时候已经被弃用了。

When the event name "hover" is used, the event subsystem converts it to "mouseenter mouseleave" in the event string. This is annoying for several reasons: Semantics: Hovering is not the same as the mouse entering and leaving an element, it implies some amount of deceleration or delay before firing. Event name: The event.type returned by the attached handler is not hover, but either mouseenter or mouseleave. No other event does this. Co-opting the "hover" name: It is not possible to attach an event with the name "hover" and fire it using .trigger("hover"). The docs already call this name "strongly discouraged for new code", I'd like to deprecate it officially for 1.8 and eventually remove it.

为什么他们删除用法是(":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%的情况下有另一种方法!

希望我能帮到一些人。

Greetz安迪