javascript - 如果元素具有 "disabled"类，则拦截并阻止所有点击事件

Question

我真的厌倦了这种模式:

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

我想拦截具有“disabled”类动态添加的元素的所有点击事件。

我尝试过这个:

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

但不知何故它不起作用。该脚本位于我的 page.js 顶部

<小时/>

更新陷阱是可以动态添加“禁用”类。

因此，如果您已经向按钮添加了事件监听器，则必须有一个解决方案来拦截其所有点击处理程序，并检查该元素现在是否已禁用。如果是，则停止此事件以供处理程序捕获。

Answer 1

然后过滤掉这些元素？

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

如果稍后添加该类，您可以使用委托(delegate)事件处理程序，并且如果您确实希望为具有该类或位于此类元素内的所有元素返回 false:

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

编辑:

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

//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