Prototype Element.toggle on hover, disables with childElements

Question

Hi,

I got the following situation:

I got a table structure like this:

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

What I'm doing with the following function is displaying the hidden span on hover of the table row. However it quirks whenever I hover the childElements inside the tr: the anchored image and the span itself. How can I fix this?

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

Try the following:

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

The key is using "this". With Prototype, "this" will always be the element the event is bound to, whereas event.target (which you shouldn't use as it is not cross-browser) and event.findElement() will be the actual element that the event occurred on. The .up('tbody') is merely a personal preference, and ensures that you are selecting the parent tbody, and nothing else. Try it with or without.

Read: http://www.prototypejs.org/api/event/observe for more information and examples on how Event bubbling works.