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：锚定图像和跨度本身时，它就会出现怪癖。我该如何解决这个问题？

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

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

1 个答案: