0

我真的厌倦了这种模式：

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

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

我试过这个：

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

但不知何故它不起作用。这个脚本在我 page.js 的顶部

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

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

4

4 回答 4

2

使用此代码

    $('input,a,div').click(function(event){
    if ($(this).hasClass("disabled")) {
        return false;
    }
});
于 2013-07-20T21:36:10.233 回答
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');

编辑

于 2013-07-20T21:40:07.277 回答
1

解决了：

我找到了两种拦截方式：

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

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

有关更多详细信息，请参阅他的答案，如果您觉得这有帮助，请点赞他的答案。

2）我们可以把这段代码放在最前面，以便首先执行，但请确保在渲染 DOM 时添加它：

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

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

如果您已经拥有大量处理程序并且不想重写它，则此解决方案很好。 例子

于 2013-07-20T23:04:56.793 回答
0

您可以使用伪类:disabled：

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

    return false;

});
于 2013-07-20T21:39:20.690 回答