Combinant les fonctions jquery - sur() hover/mouseenter/mouseleave

J'ai une série d'éléments (permet de les appeler".mon-éléments") - une charge sur le document de prêt, tandis que d'autres sont chargés plus tard, via un script de pagination.

Je voudrais mettre une variable en fonction de si oui ou non la souris est sur ces éléments. Le code ci-dessous fonctionne, mais je soupçonne qu'il ya une meilleure façon... puis-je le faire si je n'ai que de référence du DOM fois?

$(document).on('mouseenter','.my-elements', function(){
    mouse_is_inside = true;
});

$(document).on('mouseleave','.my-elements', function(){
    mouse_is_inside = false;
});

Merci!

InformationsquelleAutor Nicole Harris | 2012-03-21
  1. 90

    Vous pouvez lier les deux ensemble et vérifier la événement.type:

    $(document).on('mouseenter mouseleave', '.my-elements', function (ev) {
    mouse_is_inside = ev.type === 'mouseenter';
});

    Ou, si vous voulez les garder séparés, .on a une autre syntaxe qui prend une carte d'événement:

    $(document).on({
    mouseenter: function () {
        mouse_is_inside = true;
    },

    mouseleave: function () {
        mouse_is_inside = false;
    }
}, '.my-elements');
    InformationsquelleAutor Jonathan Lonowski
  2. 5

    Presque toutes les méthodes jQuery retour des objets, de sorte que vous pouvez de la chaîne d'ensemble:

    $(document).on('mouseenter','.my-elements', function(){
    mouse_is_inside = true;
}).on('mouseleave','.my-elements', function(){
    mouse_is_inside = false;
});
    • Une démo -> jsfiddle.net/skram/qsmfb
    • mot d'avertissement, cela ne fonctionnera pas car il n'est pas chainable.
    • REMARQUE: comme de jQuery 1.9 .live() a été supprimé
    InformationsquelleAutor DC_
  3. 5

    Découvrez jQuery hover qui est le même que:

    $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    Mise à JOUR: je viens de réaliser que vous avez besoin de conserver les événements par l'intermédiaire de la méthode. Dans ce cas, vous pouvez utiliser une carte d'événement de la sorte:

    .on({
    mouseenter: function() {
        console.log('enter');
    },
    mouseleave: function() {
        console.log('bye!');
    }
})
    InformationsquelleAutor Derek Hunziker
  4. 2

    Vous pouvez également essayer:

    $(".my-elements").hover(function(eIn) {
    //do work for mouse over
}, 
function(eOut) {
    //do work for mouse out
});

    mise à jour et correction

    réalisé que vous avez besoin de plus dynamique de verrouillage dans laquelle les cas de Jonathan Lonowski ou Derek Hunziker est parfait

    • Qui ne fonctionnera pas sur le de créer dynamiquement des éléments. Citation OP: "...une charge sur le document de prêt, tandis que d'autres sont chargés plus tard..."
    InformationsquelleAutor SpYk3HH
  5. 1

    Pour commencer, vous pouvez choisir pour vos éléments au lieu de document.

    $('.my-elements').on('mouseenter', function(){
    mouse_is_inside = true;
});

    Vous pouvez essayer un raccourci de notation comme celle-ci...

    $('.my-elements').on('mouseenter mouseleave', function(){
    mouse_is_inside = !mouse_is_inside;
});

    Cela réduit à néant la valeur à chaque fois que la souris passe dans ou à l'extérieur, ce qui devrait empêcher la mouse_is_inside ensemble de variables à la bonne valeur.

    InformationsquelleAutor Surreal Dreams
  6. 0
    $('.my-elements').on('mouseenter mouseleave', function(event){
    mouse_is_inside = event.type === 'mouseenter';
});

    mais son généralement pas une bonne idée d'avoir une variable globale incidating un événement d'état

    • Quels sont les problèmes avec la configuration des variables globales comme le cas des indicateurs d'état?
    InformationsquelleAutor worenga