javascript - 扩展 jQuery 单击处理程序(修补 $.fn.click 函数？)以检查条件

Question

根据评论更新

@adeneo :配备来自 this question 的答案关于 disabled 的语法属性和 this question对于自定义属性，我觉得将该属性添加到除列出的元素之外的元素中很满意 in the docs作为可以“实际禁用”的。所以确实是我的一些<a>甚至 <span>元素可以获取该属性，以便用 CSS 和 JS 更统一地处理它们。

为了简洁和面向 future (例如，有人稍后向页面添加一个或两个输入)，我将我的单击事件监听器立即附加到所有类似的元素 - 并根据元素的内容处理它们是。这个问题是由于需要禁用某些元素直到 ajax 请求完成而提出的。单击会触发调用，我想在第一个调用完成之前阻止其他调用。

@Patrick Q我不知道如何用非常短的代码片段来表达我意图的可行性 - 所以我在 codepen 中编写了一个示例:

example on codepen.

---

原始问题:

我想向我的“click”事件监听器添加一个条件，以检查目标元素是否已禁用。

我的一些链接具有或获得“禁用”属性(出于多种原因，使用链接更方便 - 尽管交互是用 js 处理的)。在这种情况下，我想要click处理程序立即返回 false(即 PreventDefault 和 stopPropogation)，因此禁用的链接确实会被禁用。

我当然可以在代码中搜索所有点击处理程序附件，并在每个附件中单独添加条件 - 但这确实非常不干燥。另一种方法是根据属性绑定(bind)/取消绑定(bind)事件 - 但这看起来也很困惑......我想在一个地方更改它，这样它就可以在任何地方工作:- )。

每jQuery docs , click用于附加监听器只是 $.on() 的简写。所以我想我可以扩展它的功能...但是如何扩展呢？

这是否是正确的思考方向？

Answer 1

您可以猴子修补(替换)jQuery $.on方法来添加你的逻辑，但是维护起来会很痛苦，因为每当 jQuery 发生变化时，你也需要更新你的补丁。

作为概念证明，这里有一个 working monkey patch for $.click -:

jQuery.fn['click'] = function( data, fn ) {

  var wrap = function(handler) {
    return function(e) {
      if ($(e.currentTarget).hasClass('disabled')) { 
        e.stopImmediatePropagation();
        return false;
      } else {
        handler(e); 
      } 
    }
  }

  if(arguments.length > 0) {
    if(typeof fn == 'undefined') {
      this.on('click', null, wrap(data), fn );
    } else {
      this.on('click', null, data, wrap(fn) );
    }
  } else {
    this.trigger('click');
  }
};

请注意，我最终不得不重现 original implementation 中的逻辑。正确处理可能参数的变化。

您还可以为 $.on 编写一个包装器并强制你的团队使用它，但有人不可避免地会忘记它，你最终会遇到神秘的差异，这会让人们慢慢发疯。

最后，您可能只是想让浏览器通过使用像 <button> 这样的表单元素来担心它。当 disabled 时，其行为正确，并根据需要设计它们的样式。