Прототип Element.toggle при наведении, отключается с помощью childElements

У меня возникла следующая ситуация:

У меня получилась такая структура таблицы:

<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>

Что я делаю со следующей функцией, так это отображение скрытого диапазона при наведении курсора на строку таблицы. Однако это причудливо всякий раз, когда я наводил дочерние элементы внутри 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();
});

hover children prototypejs
person richard    schedule 21.07.2009    source источник
comment
Не могли бы вы уточнить, что вы подразумеваете под его причудами? Спасибо.   -  person hobodave    schedule 21.07.2009
comment
Ой, извини. Всякий раз, когда я наводил курсор на дочерний элемент, javascript думает, что я нахожусь вне родительского элемента, поэтому он скрывает диапазон. Но на самом деле мой курсор все еще находится в родительском элементе (tr).   -  person richard    schedule 21.07.2009

Ответы (1)


arrow_upward
5
arrow_downward

Попробуйте следующее:

$$('#financedata tr').invoke('observe', 'mouseout', function(event) {
    this.up('tbody').childElements()[4].childElements()[0].toggle();
});

Ключ использует «это». В Prototype «это» всегда будет элементом, к которому привязано событие, тогда как event.target (который вам не следует использовать, поскольку он не является кросс-браузерным) и event.findElement() будут фактическим элементом, к которому относится событие. произошло на. .up('tbody') является просто личным предпочтением и гарантирует, что вы выбираете родительский tbody и ничего больше. Попробуйте с ним или без.

Прочтите: http://www.prototypejs.org/api/event/observe для получения дополнительной информации. информация и примеры о том, как работает всплывающее окно событий.

person hobodave    schedule 21.07.2009
comment
P.S. Возможно, вам придется изменить tbody на table в зависимости от вашей разметки DOM. - person hobodave; 21.07.2009
comment
Также обратите внимание, что некоторые браузеры (Firefox) неявно добавляют tbody в вашу DOM, если вы его не укажете, так что следите за этим. - person hobodave; 21.07.2009
comment
Большое спасибо! Это работает :) Я буду читать больше о всплытии событий и использовании этого в наблюдателе. На самом деле мне не пришлось использовать up() с этим, поскольку, как вы сказали, событие привязано к ‹tr›. - person richard; 21.07.2009
comment
Кстати, я обнаружил, что thead и tbody довольно глючные в Firefox. Вы случайно не знаете решение другой моей проблемы с Firefox? stackoverflow.com/questions/1111337/ - person richard; 22.07.2009