hover - 悬停时原型(prototype) Element.toggle，禁用 childElements

Question

我遇到了以下情况:

我有一个这样的表结构:

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

我使用以下函数所做的是在表行悬停时显示隐藏的跨度。但是，每当我将 childElements 悬停在 tr 中时，它就会出现异常:锚定图像和 span 本身。我该如何解决这个问题？

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

尝试以下操作:

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

关键是使用“this”。对于 Prototype，“this”将始终是事件绑定(bind)到的元素，而 event.target(你不应该使用它，因为它不是跨浏览器的)和 event.findElement() 将是事件的实际元素发生在。 .up('tbody') 只是个人喜好，确保您选择的是父 tbody，而不是其他。尝试使用或不使用。

阅读:http://www.prototypejs.org/api/event/observe有关事件冒泡如何工作的更多信息和示例。