1

jQuery を使用して作成しているスクリプトで厄介な問題が発生しました。

ホバーすると任意の行にツールバーが表示されるテーブルがあります（見出し行を除く）。これはうまく機能しており、これがそのコードです。

$cont.delegate('tr:not(:eq(0))','mouseover mouseout', function(e){
    var $this = $(this);
    var pos = $this.position();
    if(e.type == 'mouseout') {
        $actionToolbar.hide();
    } else {
        $actionToolbar.css({
            'top'  : pos.top  + $this.height()/2 - $actionToolbar.height()/2,
            'left' : pos.left + $this.width()    - $actionToolbar.width()
        }).show();
    }
});

アクション ツールバーにカーソルを合わせると、問題が発生します。行のmouseoutイベントが発生し、ツールバーが非表示になります (その後、表示/非表示の無限ループに入ります)。これは、ツールバーが絶対位置にあり、行の子ではないためです。

契約は次のとおりです。

  • 行の子にしたくありません。これは、マウス イベントごとに削除して DOM に追加する必要があるためです。これは、要素の CSS を単純に更新するほど効率的ではありません。
  • 可能であれば、これを解決するためにタイマーも避けたいと思います。

前もって感謝します！

4

3 に答える 3

1

少し我慢して、私は行って自分の答えを見つけました：

イベント リスナーを削除し、mouseoutjQuery のdata()メソッドを使用して、前にホバーした行を追跡するようにしました。mouseleave次に、コンテナーにイベント リスナーを追加します。

それは完全に機能します：

$cont.delegate('tr:not(:eq(0))', 'mouseover', function(e) {
    var $this = $(this);
    $($cont.data('COLStorage.row')).removeClass(opts.hoverClass);
    $this.addClass(opts.hoverClass);
    var pos = $this.position();
    $actionToolbar.css({
        'top': pos.top + $this.height() / 2 - $actionToolbar.height() / 2,
        'left': pos.left + $this.width() - $actionToolbar.width()
    }).show();
    $cont.data('COLStorage.row', $this);
}).mouseleave(function(e) {
    $actionToolbar.fadeOut();
});
于 2011-04-26T19:05:54.807 に答える
0

アクション ツールバーにマーカー css セレクターを配置し、jquery を使用してチェックします。イベントのターゲットにそのマーカーセレクターがある場合は、適用しないでください。

于 2011-04-25T19:38:13.630 に答える
0

mouseover と mouseout の代わりに、mouseenter と mouseleave を試してください。

于 2011-04-25T19:33:12.147 に答える