3

次のような状況になりました。

私はこのようなテーブル構造を手に入れました：

<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内のchildElements（アンカー画像とスパン自体）にカーソルを合わせると、癖がつきます。どうすればこれを修正できますか？

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

1 に答える 1

5

次のことを試してください。

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

ポイントは「これ」を使うことです。プロトタイプでは、「this」は常にイベントがバインドされる要素になりますが、event.target (クロスブラウザーではないため使用しないでください) と event.findElement() はイベントがバインドされる実際の要素になります。に発生しました。.up('tbody') は単なる個人的な好みであり、親 tbody を選択していることを確認し、それ以外は何も選択していません。ありまたはなしで試してみてください。

イベントバブリングの仕組みの詳細と例については、 http : //www.prototypejs.org/api/event/observeを参照してください。

于 2009-07-21T15:41:37.310 に答える