每个评论更新

@adeneo:有了this question关于disabled属性的语法和this question自定义属性的语法的答案,我感到满意的内容是将该属性添加到除in the docs所列元素之外的其他元素上,这些元素可以“实际上被禁用” ”。因此,确实我的某些<a>甚至<span>元素都可以获取该属性,以更统一的方式使用CSS和JS处理它们。

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

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

example on codepen.



原始问题:

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

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

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

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

思考的方向是否正确?

最佳答案

您可以猴子修补(替换)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时它们会正确运行,并根据需要设置样式。

09-30 16:05
查看更多