悬停时原型元素.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>

我正在使用以下函数，通过鼠标悬停在表格行上来显示隐藏的span。但是当我悬停在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();
}); 

- richard

---

你能澄清一下“it quirks”是什么意思吗？谢谢。 - hobodave

哦，抱歉。每当我悬停在子元素上时，JavaScript 就会认为我已经悬停在父元素之外，因此它会隐藏 span。但实际上我的光标仍然在父元素（tr）中。 - richard

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 获取有关事件冒泡如何工作的更多信息和示例。

- hobodave

---

请注意根据您的 DOM 标记，将 tbody 更改为 table。 - hobodave

还要注意，某些浏览器（Firefox）在您不指定tbody时会隐式地将其添加到DOM中，因此要注意这一点。 - hobodave

非常感谢！它有效了 :) 我会继续阅读有关事件冒泡和在观察者中使用它的更多信息。实际上，我不需要使用up()，因为正如你所说，事件绑定到<tr>。 - richard

顺便提一句，我发现Firefox中thead和tbody存在很多bug。你知道解决我在Firefox中遇到的其他问题的方法吗？http://stackoverflow.com/questions/1111337/prototype-element-update-multiple-objects - richard