原型 Element.toggle 悬停，子元素禁用

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”将始终是事件绑定到的元素，而 event.target（您不应该使用它，因为它不是跨浏览器）和 event.findElement() 将是事件的实际元素发生在。 .up('tbody') 只是个人偏好，并确保您选择父 tbody，仅此而已。不管有没有都试试。

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