Question

我真的厌倦了这种模式：

$("#moveButton").click(function() {
    if ($(this).hasClass("disabled")) {
        return;
    }
    //do something
});

我想拦截所有点击事件的元素，这些事件已经动态添加“已禁用”类。

我试过了：

$('input,a,div').click(function(event){
    if ($(this).hasClass("disabled")) {
        event.preventDefault()
        event.stopPropagation();
    }
});

但不知怎的，它不起作用。这个脚本位于我的页面顶部.js

更新缺点是可以动态添加“禁用”类。

所以你已经为一个按钮添加了事件监听器，必须有一个 INTERCEPT 所有点击处理程序的解决方案，并检查现在是否禁用了这个元素。如果是的话，请停止处理程序捕获此事件。

Answer 1

使用此代码

    $('input,a,div').click(function(event){
    if ($(this).hasClass("disabled")) {
        return false;
    }
});

Answer 2

那么过滤掉那些元素呢？

$('input,a,div').not('.disabled').on('click', function(){
    // do stuff 
});

如果稍后添加该类，则可以使用委托事件处理程序，如果您确实要为具有该类或位于此类元素内的所有元素返回false：

$('input,a,div').on('click', function(e) {
    if ( $(e.target).closest('.disabled').length ) return false;
});

修改

如上所述，如果委托处理程序，您可以过滤掉事件处理程序中稍后添加的类，如下例所示：

//bind an event handler to all DIV element that does NOT have a .disabled class $(document).on('click', 'div:not(.disabled)', function() { alert('ok'); }); // even if we add the class later, the event handler above will filter it out $('.test').eq(1).addClass('disabled');

EDIT

Answer 3

<强>解决：

我找到了两种截取方式：

1）不是拦截。正如@adeneo所说，我们可以在附加事件处理程序时使用.on(和test方法：

$(document).on('click', 'div:not(.disabled)', function() {
    alert('ok');
});

如果您觉得有帮助，请查看他的答案以获取更多详细信息并提升答案。

2）我们可以将此代码 ON TOP 用于执行第一个，，但请确保在呈现DOM时添加：

$("a,div,input").click(function(event){
    if($(this).hasClass('disabled')){ 
       event.stopImmediatePropagation()
    }
});

这会阻止执行所有现有的.click，.on('click'和.live('click'处理程序。 如果他们没有其他参数。

如果你已经拥有大量的处理程序并且不想重写它，那么这个解决方案很好。 EXAMPLE

Answer 4

您可以使用伪类:disabled：

$('input:disabled,a:disabled,div:disabled').click(function() {

    return false;

});

如果元素具有“禁用”类，则拦截并阻止所有单击事件

4 个答案: