悬停时的原型 Element.toggle，使用 childElements 禁用

发布于 2024-07-29 05:39:53 字数 822 浏览 4 评论 0原文

我遇到了以下情况：

我得到了这样的表结构：

<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();
});

原文

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();
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城 2024-08-05 05:39:53

尝试以下操作：

$('#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 了解更多有关事件冒泡如何工作的信息和示例。

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.

回复收藏 0 原文

~没有更多了~