Javascript 尝试使用jqueryoff方法删除mouseleave

我有一个按钮数组，我想删除该按钮单击后的侦听器。下面是我如何努力做到这一点的

JS:

---

我认为任何关闭方法都不适合我，只是不确定原因。

jQuery事件委派要求使用相同的选择器打开和关闭事件侦听器。换句话说，您不能仅在一个元素上关闭委派事件侦听器

要解决此问题，需要关闭事件侦听器，然后使用将排除所选元素的选择器将其重新打开。在这种情况下，我们有您的类“selected”。因此，我更新了您的鼠标输入/离开选择器，使其包含：not（.selected）

这里是一个例子——fiddle有几行额外的代码（注释）来帮助可视化javascript

var currentBtn;
var selectedBtn = $("#moto-menu a");

function arrowEnter(){
    TweenMax.to($(this).children('img'),0.5,{alpha:1, left: -5});
}

function arrowLeave(){
   TweenMax.to($(this).children('img'),0.25,{alpha:0, left: -10});
}

function setMouseEnterLeaveListeners() {
    var eventsSelector = '#moto-menu a:not(.selected)';
    $("body").off( "mouseenter", eventsSelector, arrowEnter);
    $("body").off( "mouseleave", eventsSelector, arrowLeave);
    $("body").on( "mouseenter", eventsSelector, arrowEnter);
    $("body").on( "mouseleave", eventsSelector, arrowLeave);
}

function arrowClick(evt){
    // if there is a class to remove, remove it
    if (currentBtn) {
        $(currentBtn).removeClass("selected");
    }

    currentBtn = this;
    $(currentBtn).addClass("selected");

    // remove the listener from this button
    setMouseEnterLeaveListeners()
}

// Moto menu rollover animation
setMouseEnterLeaveListeners()
$("body").on( "click", "#moto-menu a", arrowClick);

---

当您删除侦听器时，是否有理由以字符串形式传入

currentBtn

？另外，您不能检查

$（this）

对象是否为

currentBtn

，如果是，则不执行该操作吗？似乎一旦它们被取消选中，arrowEnter&arrowLeave函数应该再次激活？不能这样做

off（）

。。只需在事件处理程序中检查类即可。@Charlietfl-谢谢！我甚至没有想过要这么做。也可以在

箭头中循环索引，单击
以获得
$（currentBtn）
，因为它与
$（此）
相同，可以将整个内容缩减为
$（“#moto menu a.selected”）。removeClass（'selected'）$（此）.addClass（'selected'）
var currentBtn;
var selectedBtn = $("#moto-menu a");

function arrowEnter(){
    TweenMax.to($(this).children('img'),0.5,{alpha:1, left: -5});
}

function arrowLeave(){
   TweenMax.to($(this).children('img'),0.25,{alpha:0, left: -10});
}

function setMouseEnterLeaveListeners() {
    var eventsSelector = '#moto-menu a:not(.selected)';
    $("body").off( "mouseenter", eventsSelector, arrowEnter);
    $("body").off( "mouseleave", eventsSelector, arrowLeave);
    $("body").on( "mouseenter", eventsSelector, arrowEnter);
    $("body").on( "mouseleave", eventsSelector, arrowLeave);
}

function arrowClick(evt){
    // if there is a class to remove, remove it
    if (currentBtn) {
        $(currentBtn).removeClass("selected");
    }

    currentBtn = this;
    $(currentBtn).addClass("selected");

    // remove the listener from this button
    setMouseEnterLeaveListeners()
}

// Moto menu rollover animation
setMouseEnterLeaveListeners()
$("body").on( "click", "#moto-menu a", arrowClick);