Comment puis-je vérifier si la souris est sur un élément jQuery?

Question

Y at-il un moyen rapide et facile de le faire dans jQuery que je suis absent?

Je ne veux pas utiliser l'événement mouseover parce que je suis déjà l'utiliser pour autre chose. Je veux juste savoir si la souris est sur un élément à un moment donné.

Je voudrais faire quelque chose comme ça, si seulement il y avait une fonction « IsMouseOver »:

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

Answer 1

Définir un délai d'attente sur le mouseout à fadeOut et stocker la valeur de retour aux données dans l'objet. Ensuite onmouseover, annulez le délai d'attente en cas de valeur dans les données.

Supprimer les données sur le rappel de la fadeout.

Il est en fait moins cher à utiliser mouseenter / mouseleave parce qu'ils ne se déclenchent pas pour le menu lorsque les enfants mouseOver / feu mouseout.

Answer 2

Ce code illustre ce Happytime harry et moi essayons de dire. Lorsque la souris entre, une infobulle sort, lorsque la souris laisse fixe un délai pour qu'il disparaisse. Si la souris entre dans le même élément avant que le délai est déclenché, nous détruisons la gâchette avant qu'elle ne se déclenche en utilisant les données que nous avons enregistrée avant.

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

Une vérification en vol stationnaire propre et élégant:

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

Answer 4

ATTENTION: is(':hover') est déconseillés dans jquery 1.8+. Voir cette post pour une solution .

Vous pouvez également utiliser cette réponse: https://stackoverflow.com/a/6035278/8843 pour tester si la souris est planer un élément:

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

Answer 5

Vous pouvez utiliser l'événement hover jQuery pour garder la trace manuellement:

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

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

Answer 6

Je avais besoin d'exactement comme cela (dans un petit environnement plus complexe et la solution avec beaucoup de « mouseenters » et le wasnt 'mouseleaves de fonctionner correctement) donc je créé un petit plugin jquery qui ajoute la méthode IsMouseOver. Il a assez bien fonctionné jusqu'à présent.

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

Ensuite, en tout lieu du document yo appellent comme ça et il retourne vrai ou faux:

$("#player").ismouseover()

Je l'ai testé sur IE7 +, Chrome et Firefox 1+ 4 et fonctionne correctement.

Answer 7

Dans jQuery vous pouvez utiliser .est ( ''): vol stationnaire, donc

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

maintenant serait la façon la plus concise de fournir la fonction demandée dans l'OP.

Remarque: cette procédure ne fonctionne pas dans IE8 ou moins

Comme alternative moins succincte qui fonctionne dans IE8 (si je peux faire confiance modus IE8 IE9), et le fait sans déclencher $(...).hover(...) dans tous les sens, ne nécessite de connaître un sélecteur pour l'élément (dans lequel la réponse de cas Ivo est plus facile) :

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

Answer 8

Je pris l'idée de SLaks et enveloppé dans un petite classe .

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

  

Pour votre information pour les futurs JUSTE trouveurs de cela.

J'ai fait un plugin jQuery qui peut faire cela et beaucoup plus. Dans mon plug-in, pour obtenir tous les éléments du curseur est plané au-dessus, il suffit de faire ce qui suit:

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

Comme je l'ai mentionné, il a aussi beaucoup d'autres utilisations que vous pouvez voir dans le

jsFiddle trouvé ici

Answer 10

Comme je ne peux pas commenter, je vais donc écrire cela comme une réponse!

S'il vous plaît comprendre la différence entre sélecteur css ": hover"! Et l'événement de vol stationnaire

« : hover » est un sélecteur de css et a en effet été retiré à l'événement lorsqu'il est utilisé comme celui-ci $("#elementId").is(":hover"), mais il est ce qui signifie qu'il n'a vraiment rien à voir avec le vol stationnaire d'événements jQuery.

si vous le code $("#elementId:hover"), l'élément ne sera sélectionné lorsque vous survolez avec la souris. l'énoncé ci-dessus fonctionne avec toutes les versions de jQuery que votre sélection de cette élément avec la sélection css pure et légitime.

Par contre le vol stationnaire de l'événement qui est

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

est en effet deprecaded comme jQuery 1.8 ici l'état du site jQuery:

  

Lorsque le nom de l'événement « vol stationnaire » est utilisé, le sous-système d'événement convertit   à « mouseenter mouseleave » dans la chaîne d'événements. Ceci est gênant pour   plusieurs raisons:

     

Sémantique: Hovering est pas la même que l'entrée de la souris et en laissant   un élément, elle implique une certaine quantité de décélération ou de retard avant   cuisson. Nom de l'événement: Le event.type retourné par le gestionnaire est attaché   pas vol stationnaire, mais soit mouseenter ou mouseleave. Aucun autre événement ne   cette. Cooptation le nom de « vol stationnaire »: Il est impossible de joindre un   événement avec le nom de « vol stationnaire » et le feu à l'aide .trigger ( « vol stationnaire »). le   docs appellent déjà ce nom « fortement déconseillé pour le nouveau code », je   comme à désapprouver officiellement pour 1,8 et éventuellement le supprimer.

Pourquoi ils ont enlevé l'usage est ( « : hover »). Ne sait pas, mais oh bien, vous pouvez toujours l'utiliser comme ci-dessus et est un petit hack pour utiliser encore ici, il

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

Oh et I ne recommendons la version du délai d'attente que ce apporte beaucoup de complexité , des fonctionnalités de délai d'utilisation pour ce genre de choses s'il n'y a pas d'autre moyen et croire moi, 95 pour cent de% des cas, il y a une autre façon

L'espoir que je pourrais aider un couple de personnes là-bas.

Greetz Andy

Answer 11

Merci à vous deux. À un certain moment, je devais renoncer à essayer de détecter si la souris était encore au-dessus de l'élément. Je sais qu'il est possible, mais peut exiger trop de code à accomplir.

Il m'a fallu un peu de temps mais je pris vos deux suggestions et est venu avec quelque chose qui fonctionnerait pour moi.

Voici un exemple simplifié (mais fonctionnel):

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

Et puis pour faire ce travail tout cela est sur un texte que je dois faire:

<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.

Avec beaucoup de CSS de fantaisie, cela permet de très belles infobulles d'aide mouseover. Soit dit en passant, je avais besoin du retard dans le mouseout en raison de minuscules espaces entre les cases et le texte qui a été à l'origine de l'aide à clignoter lorsque vous déplacez la souris sur. Mais cela fonctionne comme un charme. Je l'ai fait aussi quelque chose de similaire pour les événements focus / flou.

Answer 12

Je vois les délais d'attente utilisés pour ce lot, mais dans le contexte d'un événement, ne peux pas vous regarder coordonnées, comme ceci:

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

En fonction du contexte, vous devez vous assurer (ce == e.target) avant d'appeler areXYInside (e).

FYI Je cherche à utiliser cette approche dans un gestionnaire DragLeave, afin de confirmer que l'événement DragLeave n'a pas été déclenché en allant dans un élément enfant. Si vous ne en quelque sorte de vérifier que vous êtes toujours à l'intérieur de l'élément parent, vous pourriez tort de prendre des mesures qui est destiné uniquement lorsque vous quittez vraiment le parent.

EDIT: ceci est une bonne idée, mais ne fonctionne pas toujours assez. Peut-être avec quelques petites modifications.

Answer 13

Vous pouvez tester avec jQuery si un div enfant a une certaine classe. Ensuite, en appliquant cette classe lorsque vous survolez et sortir un certain div, vous pouvez tester si votre souris est dessus, même lorsque vous passez la souris sur un élément différent sur la page de code beaucoup moins de cette façon. J'utilisé parce que j'avais des espaces entre divs dans une fenêtre pop-up, et je ne voulais fermer la fenêtre quand je me suis déplacé hors de la fenêtre pop-up, pas quand je bougeais ma souris sur les espaces dans la fenêtre pop-up. Alors j'ai appelé une fonction mouseover sur la div contenu (que le pop up était finie), mais cela ne ferait que déclencher la fonction de fermeture quand je mouchetés-sur div de contenu, et était en dehors de la fenêtre pop-up!

$(".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 14

Ce serait la meilleure façon de le faire!

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

Answer 15

Voici une technique qui ne repose pas sur jquery et utilise le matches DOM natif API . Il utilise des préfixes fournisseurs pour soutenir les navigateurs qui remontent à IE9. Voir matchesselector sur caniuse.com pour plus de détails.

Tout d'abord créer la fonction matchesSelector, comme suit:

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

Alors, pour détecter vol stationnaire:

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

Answer 16

J'ai répondu à cette question dans une autre, avec tous les détails que vous pourriez avoir besoin:

détecter si planant au-dessus de l'élément jQuery (a 99 upvotes au moment de la rédaction)

En fait, vous pouvez faire quelque chose comme:

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

Cela ne fonctionne que si oi est un objet jQuery contenant un seul élément. S'il y a plusieurs éléments adaptés, vous devez appliquer à chaque élément, par exemple:

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

Cela a été testé à partir de 1,7 jQuery.

Answer 17

L'extension de ce que dit « Happytime harry », assurez-vous d'utiliser la fonction jquery .data () pour stocker l'ID de délai d'attente. Il en est ainsi que vous pouvez récupérer l'identifiant du délai d'attente très facilement lorsque le « mouseenter » est déclenchée sur ce même élément plus tard, vous permettant d'éliminer l'élément déclencheur de votre infobulle disparaître.

Answer 18

Vous pouvez utiliser mouseenter jQuery et mouseLeave événements. Vous pouvez définir un indicateur lorsque la souris entre dans la zone souhaitée et désinitialiser le drapeau quand il quitte la zone.

Answer 19

Je combiné des idées de ce sujet et est venu avec ce qui est utile pour montrer / cacher un sous-menu:

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

Semble travailler pour moi. Espérons que cela aide quelqu'un.

EDIT:. Maintenant, la réalisation de cette approche ne fonctionne pas correctement dans IE

Answer 20

Je ne pouvais pas utiliser les suggestions ci-dessus.
Pourquoi je préfère ma solution?
Cette méthode vérifie si la souris est sur un élément à tout moment choisi par vous .
mouseenter et :. Vol stationnaire sont cool, mais mouseenter ne se déclenche que si vous déplacez la souris, pas quand l'élément se déplace sous la souris
: Vol stationnaire est assez doux, mais ... IE

Je fais ceci:

n ° 1. souris magasin position x, y à chaque fois qu'il est déplacé lorsque vous avez besoin,
n ° 2. vérifier si la souris est sur l'un des éléments qui correspondent à la requête faire des choses ... comme déclencher un événement 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 21

Juste une note sur le populaire et utile Arthur Goldsmith réponse ci-dessus: Si vous vous déplacez votre souris d'un élément à un autre dans IE (au moins jusqu'à ce que IE 9), vous pouvez avoir une certaine difficulté à obtenir que cela fonctionne correctement si le nouveau élément a un fond transparent (ce qui serait par défaut). Ma solution a été le donner le nouvel élément d'une image d'arrière-plan transparent.

Answer 22

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

---

VIOLON

Answer 23

Voici une fonction qui vous permet de vérifier si la souris est à l'intérieur d'un élément ou non. La seule chose que vous devez faire est d'appeler la fonction où vous pouvez avoir un live ObjetEvenement associé à la souris. quelque chose comme ceci:

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

Vous pouvez voir le code source ici github ou au bas du message:

https://github.com/mostafatalebi/ElementsLocator/blob/ maître / 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 24

Vous pouvez utiliser is(':visible'); dans jquery Et pour $ ( 'article:. Hover). Il travaille en Jquery aussi

est un code 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>

et c'est le code 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');

});

ce que je parlais:)