Prototype Element.toggle悬停，禁用childElements [英] Prototype Element.toggle on hover, disables with childElements

问题描述

我得到了这样的表结构： < TR>
< td>文字< / td>
< td>文字< / td>
< td>文字< / td>
< td>< a href =＃>< img src =＃/>< / td>
< td>< span style =display：hidden>< a href =＃> e< / a> < a href =＃> e< / a>< / td>
< / tr>


我使用以下函数做的是在表行悬停上显示隐藏的跨度。然而，每当我将子元素悬停在tr中时，它就会发生变化：锚定图像和跨度本身。如何解决这个问题？

  //在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（）; 
}）; 
  

解决方案

请尝试以下操作：

  $$（'＃financedata tr'）。invoke（'observe'，'mouseout'，function（event）{
 this.up '）。childElements（）[4] .childElements（）[0] .toggle（）; 
}）; 
  

关键是使用this。通过Prototype，this将始终是事件绑定的元素，而event.target（因为它不是跨浏览器，所以不应该使用），event.findElement（）将是事件的实际元素发生在。 .up（'tbody'）仅仅是个人喜好，并且确保你选择了父母的tbody，而不是别的。试用它。

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

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

解决方案

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.

这篇关于Prototype Element.toggle悬停，禁用childElements的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！