在Javascript中切换点击处理程序

Question

我有一个HTML按钮,我使用jQuery附加一个事件bind(),如下所示:

$('#mybutton').bind('click', myFirstHandlerFunction);

在myFirstHandlerFunction,我希望这个处理程序用一个新的处理程序替换自己mySecondHandlerFunction,像这样:

function myFirstHandlerFunction(e) {
    $(this).unbind('click', myFirstHandlerFunction).bind('click', mySecondHandlerFunction);
}

在第二次单击处理程序中mySecondHandlerFunction,我想将按钮切换回其原始状态:取消绑定mySecondHandlerFunction处理程序并重新附加原始处理程序myFirstHandlerFunction,如下所示:

function mySecondHandlerFunction(e) {
    $(this).unbind('click', mySecondHandlerFunction).bind('click', myFirstHandlerFunction);
}

除了一个小细节之外,这很好用:因为click事件还没有通过每个按钮的点击处理程序传播,所以click事件被传递给按钮的下一个单击处理程序,它恰好是刚刚绑定的处理程序以前的处理程序.最终结果mySecondHandlerFunction在执行后立即myFirstHandlerFunction执行.

通过调用e.stopPropagation()每个处理程序可以很容易地解决这个问题,但是这具有消除可能已独立附加的任何其他点击处理程序的负面副作用.

有没有办法在两个点击处理程序之间安全地和一致地切换,而不必停止点击事件的传播？

Answer 1

更新:由于toggle()在jQuery 1.9中删除了这种形式,下面的解决方案不再起作用了.有关替代方案,请参阅此问

看起来toggle()会解决你的问题:

$("#mybutton").toggle(myFirstHandlerFunction, mySecondHandlerFunction);

上面的代码将注册myFirstHandlerFunction并mySecondHandlerFunction在备用点击时调用.

Answer 2

只需使用布尔值来切换处理程序的功能,就不需要处理哪个处理程序正在侦听:

$('#mybutton').bind('click', myHandlerFunction);
var first = true;

function myHandlerFunction(e) {
    if(first){
        // Code from the first handler here;
    }else{
        // Code from the second handler here;
    }
    first = !first; // Invert `first`
}