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(解綁)