Question

我创建了一个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');

我只想要一个人。

请建议我.....

Answer 1

首先：自jQuery 1.7以来不推荐使用.live()和.die()。您现在应该使用.on()（但是会出现同样的问题，因此这里的所有解决方案仍然有效）。

如果您不必使用事件委派，则只需unbind事件处理程序like @Raminson showed。

如果必须使用事件委派，一种方法是直接向元素添加一个额外的事件处理程序，这可以防止事件冒泡DOM并在根（like @Farhad showed）触发事件处理程序。

另一种解决方法可能是在元素上设置一个标志，并且只在标志不是的情况下执行事件处理程序的事件，例如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)访问）。

另一种方法是完全取消绑定事件处理程序，并仅为您想要的元素重新绑定它：

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

Answer 2

尝试这个可能会更好：

$('.grpName_tooltip0').mouseover(function(){return false;});

Answer 3

试试这个：

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').mouseenter(function(){
   ....
   $('.grpName_tooltip0').unbind('mouseenter');
})

die函数用于删除jquery中的事件

3 个答案: