raphaël - Raphael und jQuery kombinieren, um die Browserkompatibilität zu erreichen



raphael js tutorial (4)

Nachdem ich festgestellt habe, dass der IE nicht JavaScript onmouseout , bin ich entschlossen, stattdessen jQuery zu verwenden, sodass die browserübergreifende Kompatibilität automatisch onmouseout wird. Ich mache einen Bereich, der durch einen SVG-Pfad definiert ist, wenn die Maus darüber schwebt, und ich passte den Code an, der auf der Raphael-Website von Australien zur Verfügung gestellt wurde .

In diesem Code wird jeder Bundesstaat Australiens durch einen Raphael-Pfad definiert, zum Beispiel Tasmanien:

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

Dieser Pfad ('st') wird dann an die Funktion übergeben:

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

Im Gegensatz zu dem, was ich erwartet hätte, ist der Code st[0].onmouseover im Gegensatz zu nur st.onmouseover . Daher muss der Pfad tatsächlich ein Array sein, und st[0] , was auch immer das ist, ist das, über dem man schwebt.

Um onmouseover durch die jQuery-Entsprechung zu ersetzen (was ich glaube, ist .mouseout() ), muss ich st[0] eine Klasse zuweisen, damit ich mit jQuery darauf verweisen kann. Meine Frage ist, wie mache ich das? Wenn der Code st.onmouseover wäre, wäre das einfach, aber warum ist der Pfad ( st ) ein Array? Was genau ist st[0] ? Und wie zum Teufel komme ich dazu?

https://src-bin.com


Answer #1

Dies ist ein bisschen JavaScript-Tricks, st wird übergeben. Sehen Sie sich den JS-Code im australischen Beispiel an.

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

Also st [0] in diesem Code bezieht sich auf den Pfad DOM-Knoten von aus [state] .

Probieren Sie es mit diesem einfachen Beispiel in einer Firebug-Konsole aus:

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

h


Answer #2

Hinweis: Diese Demo wurde mit einer alten Version von Raphael erstellt. Jetzt hat Raphael seine eigenen benutzerdefinierten Event-Handler einschließlich .mouseover() und .hover() .

Kurz gesagt:

Umschließen Sie einfach das DOM-Objekt, um daraus ein jQuery-Objekt zu erstellen, oder verwenden Sie die in Raphael integrierten benutzerdefinierten Ereignisbehandlungsroutinen:

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

Oder, wahrscheinlich bequemer, und IE unterstützt:

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

Oder mit einer in Raphael eingebauten Event-Handler-Methode :

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

Das lange davon:

Sie können den Verweis auf das DOM-Objekt RaphaelObject[0] an dem der node oder [0] , da RaphaelObject[0] immer der Verweis auf das DOM-Element ist:

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

Also, mit dir Funktion:

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

Außerdem würde ich vorschlagen, in der jQuery .hover() Funktion zu suchen, die IE ziemlich gut behandelt:

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

Als vereinfachte Demonstration wird hier gezeigt, wie mouseenter und mouseout mit .hover() an ein Raphael-Element mouseout werden ( getestet in 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");    
    });
});​

Probieren Sie es mit diesem jsFiddle aus

Außerdem scheint die Raphael .hover() Methode auch im IE zu funktionieren.


Answer #3

Sie müssen keine Klasse zuweisen, um sie jQuery verfügbar zu machen. Sicherlich nicht. Sie können einfach Ihr DOM-Element an jQuery übergeben und es wird die Magie für Sie tun ...

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

Sie sehen die Array-Syntax, weil Javascript-Bibliotheken im Allgemeinen einen Verweis auf das ursprüngliche Element beibehalten (im Wesentlichen nur "Wrapping" und Hinzufügen von Funktionalität). Pseudocode-Erklärung ...

st == Raphael element
st[0] == DOM element

Answer #4

Wenn Sie nur den Code kopieren, der von der Australien-Demo verwendet wird, werden Sie IE-Probleme bekommen, egal welchen Handler (Hover, Mouseover, etc.) Sie verwenden.

Nachdem ich den Kopf für eine Weile auf den Kopf geschlagen habe, scheint es so zu sein, dass die st.toFront () in den Hover-In / Out-Funktionen das "mouse out" -Ereignis im IE abbricht. Löschen Sie diese Zeilen aus dem Beispielcode und Sie sollten in Ordnung sein.





raphael