如何基于函数返回的布尔值禁用及重新启用所有绑定的click事件

方案1：前置事件拦截（推荐，侵入性低） #

利用绑定在同一元素上的同类型事件按绑定顺序执行的特性，在所有原有点击事件绑定前先加一层拦截逻辑，不符合条件时直接终止后续事件执行，原有代码无需任何修改：

// 【注意】这段代码必须放在所有你的原有 $(document).on('click', 选择器, 回调) 绑定逻辑之前执行
// 引号内是所有需要拦截的元素选择器，多个用英文逗号分隔
$(document).on('click', '.a, .b, .c, .d', function(e) {
  if (!test()) {
    // 停止后续绑定在document上的同类型click事件执行
    e.stopImmediatePropagation();
    // 若需要同时阻止默认点击行为，可额外加一行 e.preventDefault()
  }
});

// 以下是你原本的业务代码，完全不需要修改
let tre = false;// 可根据业务条件动态切换为true或false
function test(){
  return tre;
}
$(document).on('click', '.a', function(){
  alert($(this).text());
});
$(document).on('click', '.b', function(){
  alert($(this).text());
});
// 剩余原有100多个点击事件绑定保持原样即可

方案2：包装jQuery on方法（适合选择器多的场景） #

如果需要拦截的选择器数量太多，不好逐个罗列，可以统一重写jQuery的on方法，对所有绑定到document的click委托事件做统一校验，原有绑定代码同样无需修改：

// 先保存jQuery原始的on方法
const originalOn = $.fn.on;
$.fn.on = function (events, selector, data, fn) {
  // 仅对绑定在document上的click委托事件做包装，其他绑定逻辑不影响
  if (this[0] === document && events === 'click' && typeof selector === 'string' && typeof fn === 'function') {
    // 包装原有回调，增加校验逻辑
    const wrappedCallback = function (e) {
      if (test()) {
        return fn.apply(this, arguments);
      }
    };
    return originalOn.call(this, events, selector, data, wrappedCallback);
  }
  // 非目标场景直接走原始逻辑
  return originalOn.apply(this, arguments);
};

// 以下是你原本的业务代码，完全不需要修改
let tre = false;// 可根据业务条件动态切换为true或false
function test(){
  return tre;
}
$(document).on('click', '.a', function(){
  alert($(this).text());
});
$(document).on('click', '.b', function(){
  alert($(this).text());
});
// 剩余原有100多个点击事件绑定保持原样即可

内容的提问来源于stack exchange，提问作者Smartest dumb