每个评论更新
@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
时它们会正确运行,并根据需要设置样式。