jQuery解除绑定的点击事件

发表于 | 分类于

平时，我们总会有需要让某个点击事件失效的情况，在实习中我就遇到了这个问题：点击一个按钮以后触发动画，在触发动画的那段时间里，需要把该按钮的点击事件取消，接下来就介绍一下jQuery如何解除绑定的点击事件。

要解绑点击事件，那么首先就要了解一下如何绑定点击事件，当然，可以使用jQuery的click方法为元素绑定点击事件：

1
2
3
$('#test').click(function () {
            console.log('1');
        });

也可以用jQuery的bind方法来实现点击事件的绑定：

1
2
3
4
$('#test').bind('click', hello);
function hello() {
    console.log('hello');
}

接下来介绍一下解除事件绑定的方法unbind，这个方法的语法是：

1
$(selector).unbind(event,function);

  • event：可选参数。规定删除元素的一个或多个事件由空格分隔多个事件值。
  • function：可选参数。规定从元素的指定事件取消绑定的函数名。

我们想要解除绑定的点击事件，可以这么写：

1
$('#test').unbind('click');

当然， 这样会使该元素所有的点击事件都失效，如果只想让绑定的某个点击事件失效，可以这么写：

1
$('#test').unbind('click',hello);

当然，如果这个元素只绑定了一个点击事件，可以简单地这么写：

1
$('#test').unbind();

把两个参数都省略，这样子，会把该元素所有绑定的事件都解绑，不仅仅是点击事件了。

需要注意的是，unbind方法中参数只能是函数名，而不能是匿名函数，比如那么写：

1
2
3
$('#test').unbind('click', function () {//无效
            console.log('1');
        });

这样就无法解绑了，即使绑定的函数和解绑的函数的两个匿名函数一样，这是因为函数是引用类型。总之unbind方法的参数要填函数方法名不要填匿名函数。