Prototyp Element.toggle auf schweben, deaktiviert mit childElements

Question

Ich habe die folgende Situation:

ich eine Tabellenstruktur wie diese bekommen:

<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 ich mit der folgenden Funktion mache anzeigt die versteckte Spanne beim Schweben der Tabellenzeile. Wie auch immer, es bewegt sich immer dann, wenn ich die childElements im tr übergebe: das verankerte Bild und die Spanne selbst. Wie kann ich das 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(); 
}); 

Answer 1

Versuchen Sie Folgendes:

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

Der Schlüssel "this" verwendet. Bei Prototype ist "dies" immer das Element, an das das Ereignis gebunden ist, während event.target (das Sie nicht verwenden sollten, da es nicht browserübergreifend ist) und event.findElement() das tatsächliche Element des Ereignisses ist trat auf. Das .up ('tbody') ist nur eine persönliche Vorliebe und stellt sicher, dass Sie den Elternteil auswählen, und nichts anderes. Probieren Sie es mit oder ohne.

Gelesen: http://www.prototypejs.org/api/event/observe für mehr Information und Beispiele, wie Ereignisblasen funktionieren.