Prototyp-Element.Umschalten auf schweben, deaktiviert mit childElements

Habe ich die folgende situation:

Ich habe eine Tabelle, Struktur wie dieser:

<tr>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td><a href="#"><img src="#" /></td>
  <td><span style="display:hidden"><a href="#">e</a> <a href="#">e</a></td>
</tr>

Was mache ich mit der folgenden Funktion wird die Anzeige der versteckten span-auf hover der Tabellenzeile. Aber es Macken, wenn ich mit der childElements innerhalb der tr: das verankerte Bild und die Spannweite selbst. Wie kann ich dieses Problem beheben?

//Reveal item options on hover
$$('#financedata tr').invoke('observe', 'mouseover', function(event) {
    event.target.up().childElements()[4].childElements()[0].toggle();                   
}); 
$$('#financedata tr').invoke('observe', 'mouseout', function(event) {
    event.target.up().childElements()[4].childElements()[0].toggle();
});
  • Könnten Sie näher erläutern, was du damit meinst "es Macken"? Danke.
  • Oh, tut mir Leid. Immer wenn ich schweben ein childElement, javascript denkt, dass ich schweben aus dem übergeordneten Element, so verbirgt Sie die span. Aber in der Tat mein cursor ist immer noch in der parent-Element (tr).
  • Haben Sie versucht, meine Lösung?
InformationsquelleAutor richard | 2009-07-21
  1. 5

    Versuchen Sie Folgendes:

    $$('#financedata tr').invoke('observe', 'mouseout', function(event) {
    this.up('tbody').childElements()[4].childElements()[0].toggle();
});

    Der Schlüssel ist die Verwendung von "dies". Mit Prototyp, "das" wird immer das element das Ereignis gebunden ist, in der Erwägung, dass event.Ziel (die sollte man nicht verwenden, da es ist nicht cross-browser) und event.findElement() wird der eigentliche element, das das Ereignis eingetreten ist, auf. Die .bis('tbody') ist lediglich eine persönliche Präferenz, und sorgt dafür, dass Sie die Auswahl des parent tbody, und sonst nichts. Versuchen Sie es mit oder ohne.

    Lesen: http://www.prototypejs.org/api/event/observe weitere Informationen und Beispiele auf, wie Event bubbling funktioniert.

    • P. S. Sie müssen möglicherweise ändern tbody Tabelle je nach DOM-markup.
    • Beachten Sie auch, dass einige Browser (Firefox) abrufen, fügen Sie ein tbody Ihrem DOM, wenn Sie nicht angeben, so watch out für diese.
    • Vielen Dank! Es funktioniert 🙂 ich werde Lesen Sie mehr über Event-bubbling und der Gebrauch, wenn dies im Beobachter. Eigentlich wollte ich das nicht nutzen musste (up) mit diesem, da, wie gesagt, die Veranstaltung ist gebunden an die <tr>.
    • Btw fand ich die thead-und tbody zu Recht buggy in Firefox. Kennt Ihr zufällig eine Lösung für mein anderes problem mit Firefox? stackoverflow.com/questions/1111337/...
    • richard: ich habe es beantwortet.
    InformationsquelleAutor hobodave
Schreibe einen Kommentar