jq 事件取消绑定与重新绑定

前端有时会碰到这样的需求: 点击某个元素发送ajax请求, 发送期间此元素的鼠标相关事件(比如点击)无效, 发送完成鼠标点击事件功能恢复,

对于这种需求, 我们会遇到两种情况,

一种是点击的按钮为form表单元素, 

例如是  type="submit"的button的话, 由于是表单元素, 可使用属性 disabled 禁用

第二种是非form表单元素, 

例如是一个div元素, 非表单元素不存在 disabled 属性, 可使用 pointer-events: none 这个css属性禁用此元素的鼠标事件

但pointer-events不支持ie11以下的ie浏览器, 如果你的项目不需要兼容ie11以下, 下面的可以略过不看,

下面是我们要重点说的使用jq解决的方法:

方法一:

function func(){..}
// 绑定
$(document).on('click.bar', '.foo', func)
// 取消绑定
$(document).off('click.bar', '.foo')
// 重新绑定
$(document).on('click.bar', '.foo', func)

即将事件函数声明为命名函数而不是匿名函数, 适用于事件函数已命名并且函数变量易于获取的情况,

若情况不适用, 则考虑方法二

方法二:

  <a href="javascript:;" id="button">button</a>
  <div class="unbind">unbind</div>
  <div class="rebind">rebind</div>

    // 为#button动态(委托)绑定事件
　　$(document).on('click', 'a#button', function(){
      console.log(0);
    });
    $(document).on('click', 'a#button', function(){
      console.log(1);
    });
　　// 为#button直接绑定事件
    $('a#button').on('click',  function(){
      console.log(2);
    });
    
    $(document).on('click', '.unbind', function(){
      $('a#button').on('click.disable', false);

    });
    
    $('.rebind').click(function () {
      $('a#button').off('click.disable');

　　})

点击button, 会依次打印 2 0 1, 因为直接绑定事件是直接将事件函数绑定在当前调用的元素上, 而动态绑定依靠事件冒泡捕捉元素动态绑定, 所以 2 先于 0 1被打印出来

点击.unbind 元素后, 所有动态绑定的事件函数都不会执行, 直接绑定的事件函数正常执行, 会打印 2

点击.rebind 元素后, 动态绑定的事件函数正常执行, 会依次打印 2 0 1

注意两点:

此取绑/重绑方法只适用于动态绑定事件

取绑/重绑事件上要加上命名空间, 比如'.disable', 否则$('a#button').off()时, 所有直接绑定的事件都会被off(解绑)