扩展jQuery单击处理程序（修补$ .fn.click函数？）以检查条件

Question

每个评论更新

@adeneo ：武装与回答这个问题有关语法为disabled属性， 这个问题自定义属性，我觉得内容增加该属性比列出的其他元素在文档为那些能“实际上已禁用”。 因此，确实我的某些<a>甚至<span>元素都可以获取该属性，以更统一的方式使用CSS和JS处理它们。

为了简明扼要，面向未来（例如，稍后有人在页面上添加一个或两个输入），我将单击事件侦听器立即附加到所有相似的元素上，并根据元素的含义进行处理。 该问题是由于在ajax请求完成之前必须禁用某些元素而提示的。 通话是通过点击触发的，我想在第一个通话完成之前阻止其他通话。

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

代码笔上的示例。

---

原始问题：

我想向“单击”事件侦听器添加一个条件，以检查目标元素是否被禁用。

我的某些链接具有或获得“禁用”属性（出于多种原因，使用链接更为方便-尽管交互是通过js处理的）。 在这种情况下，我希望click处理程序立即返回false（即preventDefault和stopPropogation），因此禁用链接的确会被禁用。

我当然可以在我的代码中搜索所有单击处理程序附件，并在每个附件中分别添加条件-但这确实是不干燥的。 另一种方法是根据属性绑定/取消绑定事件-但这似乎也很麻烦……我想在一个地方更改它，以便它在任何地方都可以使用:-)。

根据jQuery文档 ， click以附加侦听器只是$.on()的简写。 所以我想我可以扩展它的功能...但是呢？

思考的方向是否正确？

Answer 1

您可以猴子补丁（替换）jQuery $.on方法来添加逻辑，但是要维护它会很痛苦，因为jQuery每次更改时，您也需要更新补丁。

作为概念验证，这是$.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');
  }
};

请注意，我最终不得不从原始实现中重现逻辑，以正确处理可能的参数中的变化。

您也可以为$.on写一个包装器，并迫使您的团队使用它，但是有人不可避免地会忘记它，并且最终会导致神秘的差异，使人们逐渐生气。

最后，您可能只想让浏览器担心此问题，方法是使用诸如<button>类的表单元素，这些元素在被disabled时会正确运行，并根据需要设置样式。

Answer 2

我不知道我知道你想覆盖的原因on ，覆盖Jquery.click应该够了。

var old = jQuery.fn.click;
jQuery.fn.click = function(e) {
    //if (e.target == 'unworthy'){ do your stuff;}
old();
};

Answer 3

单击处理程序将按其附加顺序执行。 如果可以，请在附加其他点击处理程序之前添加此内容。

$('.yourLinks').click(function(e){
    if(this.disabled){  // or whatever you are checking for
        e.stopImmediatePropagation();  // stops all other click handlers
    }
});

演示： http : //jsfiddle.net/LxK3U/