2

mouseover次のようなイベント ハンドラを作成しました。

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').live('mouseover',function(){
    var localGrpName=$(this).attr('class')=='grpName_tooltip0'?arrGrpNames[0]:$(this).attr('class')=='grpName_tooltip1'?arrGrpNames[1]:$(this).attr('class')=='grpName_tooltip2'?arrGrpNames[2]:'';
    $('#GroupsDivTooltip').html(localGrpName);
    $('.ttpGrp').css({'top':$(this).offset().top+27,'left':$(this).offset().left}).fadeIn();
}).live('mouseleave',function(){
    $('#GroupsDivTooltip').html('');
    $('.ttpGrp').fadeOut();
});

.grpName_tooltip0特定のクラス名に対して .die を実行したい。

以下のように個別に試してみるとうまくいきません...

$('.grpName_tooltip0').die('mouseover');

それは言及されたすべてのために働いています...以下のように

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').die('mouseover');

1人だけにしたい。

私に提案してください.....

4

3 に答える 3

3

最初: jQuery 1.7 以降、.live()andは非推奨です。.die()今すぐ使用する必要があります.on()(ただし、同じ問題が発生するため、ここに記載されているすべての解決策は引き続き有効です)。

イベント委任を使用する必要がない場合は、@Raminson が示したようなunbind単純なイベント ハンドラーを使用できます。

イベント委任を使用する必要がある場合、1 つの方法は追加のイベント ハンドラーを要素に直接追加することです。これにより、イベントが DOM をバブリングし、ルートでイベント ハンドラーをトリガーするのを防ぎます ( @Farhad が示したように)。

他の回避策として、要素にフラグを設定し、フラグが設定されていない場合にのみイベント ハンドラーでイベントを実行することができます。たとえば、false次のようになります。

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').live('mouseover',function(){
    if($(this).data('active') !== false) {
        // do something
    }
});

要素のイベント ハンドラーを有効または無効にするには、次のように設定します。

$('.grpName_tooltip0').data('active', false); // or true

上記のすべてのアプローチには、イベント ハンドラーの起動を防ぐために、決定を行う時点で要素が存在している必要があるという欠点があります。ただし、これはあなたの状況には当てはまらない場合があります。

したがって、別の方法として、イベント ハンドラーから除外するセレクターのリストを保持することもできます。

var exclude = [];

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').live('mouseover',function(){
    var run = true, $self = $(this);
    $.each(exclude, function(sel) {
        if($self.is(sel)) {
            run = false;
            return false;
        }
    });

    if(run) {
        // do stuff
    }
});

次に、ハンドラーを起動させたくないセレクターをリストに追加するだけです。

exclude.push('.grpName_tooltip0');

O(1)このアプローチは、実際の状況に応じて、さまざまな方法で最適化できます (アクセスに配列の代わりにオブジェクトを使用するなど)。

もう 1 つの方法は、イベント ハンドラーを完全にバインド解除し、必要な要素に対してのみ再バインドすることです。

function handler() {
    // your event handler code here
}

var selectors = ['.grpName_tooltip0', '.grpName_tooltip1', '.grpName_tooltip2'];

$(selectors.join()).live('mouseover', handler);

後で：

$(selectors.join()).die('mouseover');
$($.grep(selectors, function(sel) {
    return sel !==  '.grpName_tooltip0';
}).join()).live('mouseover', handler);
于 2012-04-30T12:28:20.823 に答える
2

多分これを試す方が良いでしょう：

$('.grpName_tooltip0').mouseover(function(){return false;});
于 2012-04-30T12:09:02.937 に答える
0

これを試して：

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').mouseenter(function(){
   ....
   $('.grpName_tooltip0').unbind('mouseenter');
})
于 2012-04-30T12:09:58.177 に答える