Comment vérifier si le curseur est sur un élément?

Comment puis-je vérifier si le curseur est sur un div sur la page html avec JQuery/Javascript?

Je vais essayer d'obtenir les coordonnées du curseur pour voir si elles sont dans le rectangle de mon élément. Peut-être il ya des méthodes prédéfinies?

UPD, ne dites rien à propos de hover événements, etc. J'ai besoin d'une méthode qui retourne true/false pour certaines élément à la page, comme:

var result = underElement('#someDiv'); //true/false
  • Indépendamment de ce que vous voulez à la tête, hover est la croix-navigateur option ici, mouseover ou mouseenter est le plus facile de la croix-navigateur de façon à garder une trace de la planait élément. Aussi votre phrasé est un peu de, la souris n'est jamais en vertu d'un élément, c'est fini, c'.
  • si vous n'utilisez pas de hover, comment saurez-vous que la souris à l'entrée de cette zone de la vôtre?...
  • regardez les coordonnées de la souris et de regarder div position.
  • j'ai contribué à un pseudo-expression pour elle en espérant que cela aide quelqu'un si
  • La vérification des coordonnées du curseur peut être nécessaire. Par exemple, si vous ajoutez un élément placé sous le curseur, la mouseover/mouseenter événement ne se déclenche pas sur l'élément jusqu'à ce que l'utilisateur déplace la souris.
InformationsquelleAutor Max Frai | 2010-08-03
  1. 10

    Je ne suis pas vraiment sûr de savoir pourquoi vous souhaitez éviter de planer mal: considérons le script suivant

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

    L'idée de base est que vous utilisez passez la souris pour définir un indicateur sur l'élément que la souris est sur il n'est plus sur elle. Et puis vous écrire une fonction qui vérifie la présence de ce drapeau.

    • +1 j'aime cette solution beaucoup. Ne pas vous avez juste besoin return $(selector).data('hover'); à la fin si?
    • Ce n'est pas une réponse complète: Comment initialiser 'hover' pour commencer? 'hover' est inconnu jusqu'à ce que le pointeur entrer ou sortir de la bordure d'un élément.
    • Ah, mon mauvais; pour tenir compte de cela, supposons que le pointeur est à l'extérieur de l'élément lors de l'initialisation. hover " sera déclenché à chaque mouvement du pointeur de la souris sur l'élément, et pas seulement sur entrée. Bien que cela laisse tout de même la très petite cas de besoin de savoir où le pointeur est sur l'initialisation sans le déplacer. Pas un problème de mine mais.
    • c'était le damné pièce du puzzle manquante pour moi. couplé avec mouseleave au lieu de mouseout, j'ai l'impression de commencer à prendre le contrôle sur le vol stationnaire de l'événement.
    • Vous souhaitez peut-accélérateur de ces fonctions, il peut provoquer des problèmes de performances lors de la mise en œuvre de ce sur une page avec beaucoup d'éléments. Le * sélecteur est déjà connu pour être lent, lancement de beaucoup d'auditeurs peuvent faire pire.
    InformationsquelleAutor Ramuns Usovs
  2. 8

    Par souci d'exhaustivité, je vais ajouter quelques modifications qui, je crois, va aider un peu pour la performance.

    1. Utiliser la délégation de lier l'événement à un élément, au lieu de se lier à tous les éléments existants.

      $(document).on({
  mouseenter: function(evt) {
    $(evt.target).data('hovering', true);
  },
  mouseleave: function(evt) {
    $(evt.target).data('hovering', false);
  }
}, "*");

    2. Ajouter un jQuery pseudo-expression :hovering.

      jQuery.expr[":"].hovering = function(elem) {
  return $(elem).data('hovering') ? true : false; 
};

    Utilisation:

    var isHovering = $('#someDiv').is(":hovering");
    InformationsquelleAutor Alexander
  3. 3

    La façon la plus simple serait probablement juste de la piste de l'élément dont la souris est au-dessus à tout moment. Essayez quelque chose comme:

    <div id="1" style="border:solid 1px red; width:50px; height:50px;"></div>
<div id="2" style="border:solid 1px blue; width:50px; height:50px;"></div>
<div id="3" style="border:solid 1px green; width:50px; height:50px;"></div>

<input type="hidden" id="mouseTracker" />

​$(document).ready(function() {
    $('*').hover(function() { 
        $('#mouseTracker').val(this.id);
    });
});

    et puis, votre fonction est simplement

    function mouseIsOverElement(elemId) {
    return elemId === $('#mouseTracker').val();
}
    InformationsquelleAutor fearofawhackplanet
  4. 2

    Ne pouvez pas vous suffit de cocher $(sélectionner).is(':hover') ?

    • cela ne fonctionne pas à l'Opéra.
    • ou moins de ie9
    • Downvoting à sauve des gens de temps, car cette solution n'est pas une option plus avec jQuery 1.8 et plus récent. jQuery 1.8 obsolète .is(':hover'): stackoverflow.com/a/12517725/5295.
    InformationsquelleAutor Jean-Philippe Gire
  5. 1

    Je l'ai fait avec une fonction personnalisée:

    $(document).mouseup(function(e) { 
     if(UnderElement("#myelement",e)) {
         alert("click inside element");
     }
});

function UnderElement(elem,e) {
     var elemWidth = $(elem).width();
     var elemHeight = $(elem).height();
     var elemPosition = $(elem).offset();
     var elemPosition2 = new Object;
     elemPosition2.top = elemPosition.top + elemHeight;
     elemPosition2.left = elemPosition.left + elemWidth;

     return ((e.pageX > elemPosition.left && e.pageX < elemPosition2.left) && (e.pageY > elemPosition.top && e.pageY < elemPosition2.top))
 }
    InformationsquelleAutor domagojk