Combinaison de Raphaël et de jQuery pour réaliser la compatibilité du navigateur

Avoir découvert que IE ne gère pas le javascript onmouseout, je suis déterminé à utiliser jQuery à la place de sorte que la compatibilité inter-navigateur serait pris en charge automatiquement. Je fais une zone définie par une svg chemin de lumière lorsque la souris passe sur elle, et j'ai adapté le code fourni sur la Raphaël site web de la Australie exemple.

Dans ce code, chaque état de l'Australie est défini par un Raphaël chemin d'accès, par exemple la Tasmanie:

 aus.tas = R.path("...").attr(attr);

Ce chemin ("st") est ensuite transmis à la fonction:

st[0].onmouseover = function () {
    ...
};

Contrairement à ce que je me serais attendu, le code est st[0].onmouseover plutôt que simplement st.onmouseover. Ainsi, le chemin doit être un tableau, et st[0], quelle qu'elle soit, est la chose qui les survole.

Afin de remplacer onmouseover avec jQuery équivalent (qui je crois est .mouseout()), j'ai besoin d'attribuer une classe à st[0] donc je peut faire référence à jQuery. Ma question est, comment dois-je faire? Si le code a été st.onmouseover il serait très simple, mais pourquoi le chemin d'accès (st) un tableau? Qu'est-ce exactement st[0]? Et comment diable puis-je l'obtenir?

OriginalL'auteur Bazley | 2010-10-11

  1. 19

    Remarque: Que la démonstration a été faite avec une vieille version de Raphaël. Maintenant, Raphaël dispose de ses propres gestionnaires d'événements, y compris .mouseover() et .hover().

    Court:

    Simplement envelopper l'Objet DOM faire l'Objet jQuery hors de lui, ou d'utiliser le Raphaël construit dans des gestionnaires d'événements personnalisés:

    $(st[0]).mouseover( ... );            //This uses the jQuery .mouseover() method

    Ou, plus probablement de la pratique, et IE pris en charge:

    $(st[0]).hover( ... );                //    This uses the jQuery .hover() method

    Ou, à l'aide d'un Raphaël construit dans la méthode de gestionnaire d'événements:

    st.mouseover( ... );                 //This uses the Raphael .mouseover() method
st.hover( ... );                     //    This uses the Raphael .hover() method

    Le long de celui-ci:

    Vous pouvez obtenir la référence à l'objet DOM de travail sur l'utilisation de node ou [0], depuis RaphaelObject[0] est toujours la référence à l'élément DOM:

    aus.tas = R.path("...").attr(attr);

//aus.tas is a Raphael object
//aus.tas[0] is aus.tas.node is the reference to the DOM Object

$(aus.tas[0]).mouseover(function() {          //Could have also use aus.tas.node
    ...
});

//Raphael now has custom event handlers
aus.tas.mouseover(function() {
    ...
});
aus.tas.hover(function() {
    ...
}, function() {
    ...
});

    Donc, avec vous de la fonction:

    (function (st, state) {
      //st is a Raphael Object
      //st[0] is st.node is the reference to the DOM Object

      //This is now using jQuery for mouseover!
    $(st[0]).mouseover(function() {
        ...
    });
    ...
})(aus[state], state);

    En outre, je suggère de regarder dans le jQuery .hover() fonction, qui ne poignée de IE tout à fait bien:

    (function (st, state) {
      //This is now using jQuery not Raphael for hover!
    $(st[0]).hover(function() {
        ... //the mouseenter function
    }, function() {
        ... //the mouseleave function
    });
    ...
})(aus[state], state);

    Qu'un schéma simplifié de démonstration, voici comment lier mouseenter et mouseout à l'aide de .hover() à un Raphaël élément (testé sous IE 8):

    ​$(function() {
    var elie, paper = Raphael("canvas", 500, 500); 

      //Create Raphael element
    elie = paper.rect(0,0,100,100).attr("fill","#000");

      //Get reference to DOM object using .node and bind
      //    mouseover and mouseout to it:
    $(elie[0]).hover(function() {
        elie.attr("fill","#FFF");
    },function() {
        elie.attr("fill","#000");    
    });
});​

    Essayez avec cette jsFiddle

    En outre, le Raphael .hover() méthode semble fonctionner sous IE aussi.

    +1 Pour la recherche et la démonstration. Bien fait!
    Merci à vous tous, génial réponses! Suis complètement trié maintenant!
    .hover() est la plupart du temps bien sur IE, mais il y a une différence entre les deux .hover() dans IE et d'autres navigateurs qui peut causer des problèmes. Si votre fonction déplace l'élément, puis de revenir à nouveau, par exemple si il remet une transformation de prendre de l'élément à l'écart de la souris, puis applique une transformation de mettre l'élément de dos sous la souris, ou si elle est une .toFront() la modification de l'ordonnance, non-IE porte comme si de rien n'était, mais IE déclenche des charges de la souris événements et ignore mouseouts.

    OriginalL'auteur Peter Ajtai

  2. 7

    Vous n'avez pas besoin d'attribuer une classe à elle afin de l'exposer à jQuery. Certainement pas. Vous pouvez tout simplement passer votre élément DOM jQuery et il va faire de la magie pour vous...

    $(st[0]).mouseout(function() {
  alert("That mouse is outta here!");
};

    Vous voyez la syntaxe de tableau parce que c'est généralement la façon dont les bibliothèques Javascript conserver une référence à l'élément d'origine (essentiellement juste de "l'habillage" et l'ajout de fonctionnalités). Pseudo-code de l'explication...

    st == Raphael element
st[0] == DOM element
    Notez que vous pouvez également obtenir la référence à DOM associés l'Objet d'un Raphaël Objet à l'aide de la [ .node ](raphaeljs.com/reference.html#node) de la propriété. Donc st[0] et st.node sont équivalentes.
    Bon point. Par la même occasion, jQuery a la get() de la méthode.
    Aussi, il semble que le Raphaël [ .mouseover() et .hover() ](raphaeljs.com/reference.html#events) sont les méthodes de la croix-navigateur, tout comme le jQuery. Je pense que cette démo a été écrit avant que ces méthodes ou node ont été introduites. ---------- De toute façon, +1 pour le st[0] explication.
    Bon point de Pierre, besoin de mettre à jour le code de démonstration.

    OriginalL'auteur Josh Stodola

  3. 5

    Si vous vous retrouvez simplement de copier le code qui est utilisé par l'Australie démo, vous allez courir dans IE mal à n'importe qui de gestionnaire (passez la souris, la souris, etc) que vous utilisez.

    Après se taper la tête dessus pendant un certain temps, il semble que le saint.toFront() dans le placez dans/fonctions annuler la "souris" de l'événement dans IE. Supprimer ces lignes à partir de l'exemple de code et vous devriez être bien.

    Après avoir constaté qu'aucun des deux accepté de répondre à l'jsFiddles travail dans IE9, j'ai fait mon chemin jusqu'à la dernière réponse sur la page et le retrait de la toFront lignes résolu mon problème. Je vous remercie, monsieur.
    Merci!!!! C'est résolu pour moi aussi.

    OriginalL'auteur user641574

  4. 1

    C'est un peu de javascript, de tromperies, de saint est passé. Regardez le code JS dans l'australie exemple. 

    (function (st, state) {
                    .. some code referring to st[0] in here .. 
                })(aus[state], state);

    Donc st[0] dans ce code désigne le chemin d'accès nœud DOM de aus[de l'etat].

    Essayer vous-même avec cet exemple simple dans une console de Firebug: 

    (function(a,b) {alert(a); })("hello", "b");

    hth

    OriginalL'auteur Francis Shanahan