Prototype Element.toggle em foco, desactivada com elementos filhos

Question

Eu tenho a seguinte situação:

Eu tenho uma estrutura de tabela como esta:

<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>

O que estou fazendo com a seguinte função está exibindo o tempo escondido em foco da linha da tabela. No entanto, peculiaridades sempre que eu passe o childElements dentro do tr: a imagem ancorada e do próprio espaço. Como posso resolver isso?

// 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

Tente o seguinte:

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

A chave é usar "this". Com Prototype "este" será sempre o elemento do evento é obrigado a, enquanto event.target (que você não deve usar, pois não é cross-browser) e event.findElement () será o elemento real que o evento ocorreu em. O .Até ( 'tbody') é apenas uma preferência pessoal, e assegura que você está selecionando o tbody pai, e nada mais. Experimentá-lo com ou sem.

Leia: http://www.prototypejs.org/api/event/observe para mais informações e exemplos de como evento borbulhando obras.