javascript - 取消绑定(bind)并重新绑定(bind)点击css过渡结束

Question

我在使用 .bind() 和 .unbind() 功能时遇到问题。单击按钮时，应该会更改框的颜色。在此期间，通过解除绑定(bind)点击功能来禁用该按钮。但是，当 css 转换完成时，我在重新绑定(bind)单击时遇到问题。

到目前为止我所拥有的是:

$('button').on('click', function(){
    $('button').unbind('click');

    $('.box').toggleClass('color');

    $('.box').one('webkitTransitionEnd transitionend', function(e){
        console.log('transition ended')
        $('button').bind('click')   
    });
});

http://jsfiddle.net/t6xEf/

Answer 1

绑定(bind)时需要传递点击处理程序。因此，创建一个函数引用，然后在绑定(bind)处理程序时使用它。

function click() {
    $('button').off('click.transition');

    $('.box').toggleClass('color');   
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
    console.log('transition ended')
    $('button').on('click.transition', click)
});
$('button').on('click.transition', click);

演示:Fiddle

另外看看 namespaces 的用法在注册/删除处理程序时，因为如果有其他点击处理程序添加到按钮，我们不想打扰它

也不要在另一个事件处理程序中添加事件处理程序

<小时/>

另请查看.one()

function click() {
    $('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
    console.log('transition ended')
    $('button').one('click.transition', click)
});
$('button').one('click.transition', click);

演示:Fiddle