Javascript 如果元素有“0”，则拦截并阻止所有单击事件；残疾人士；班

我真的厌倦了这种模式：

$("#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();
    }
});

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

---

更新 缺点是“disabled”类可以动态添加

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

使用此代码

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

使用此代码

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

---

您可以使用伪类

：disabled

：

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

    return false;

});

---

您可以使用伪类

：disabled

：

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

    return false;

});

---

那就过滤掉那些元素吧

$('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');

---

那就过滤掉那些元素吧

$('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');

---

已解决：

我发现了两种拦截方式：

---

1） 不是拦截。正如@adeneo所说，在附加事件处理程序时，我们可以将

.on（

与测试方法一起使用：

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

有关更多详细信息，请参见他的答案，如果您觉得这有帮助，请向上投票

---

2） 我们可以将此代码放在顶部以首先执行，但请确保在呈现DOM时添加它：

这将阻止所有现有的

.click

、

.on（'click'

）和

.live（'click'

处理程序）被执行。如果它们没有其他参数。

如果您已经有很多处理程序并且不想重写它，那么这个解决方案是很好的。

---

已解决：

我发现了两种拦截方式：

---

1） 不是拦截。正如@adeneo所说，我们可以在附加事件处理程序时将

.on（

与test method一起使用：

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

有关更多详细信息，请参见他的答案，如果您觉得这有帮助，请向上投票

---

2） 我们可以将此代码放在顶部以首先执行，但请确保在呈现DOM时添加它：

这将阻止所有现有的

.click

、

.on（'click'

）和

.live（'click'

处理程序）被执行。如果它们没有其他参数。

如果您已经有很多处理程序并且不想重写它，那么这个解决方案是很好的。

---

---

这个问题引出了一个好问题，如何拦截由其他脚本设置的事件处理程序？假设脚本a向元素添加了一个事件句柄。我不想使用off（）完全丢失它而是禁用temporarily@AtifMohammedAmeenuddin谢谢。这正是我想要的。很抱歉解释得不好。@AtifMohammedAmeenuddin-你不能，就这么简单。停止默认操作和传播只与默认的“html”事件有关。javascript中的事件处理程序触发的操作不能“关闭”只需在另一个事件处理程序中返回false，这不是它的工作方式，唯一的方法是在事件处理程序中使用标志，或删除事件处理程序。@ZuzEL-我对委派方法进行了一些详细说明，这就是您要找的吗？这非常接近。我的回答是+1。我稍后会接受它。这个问题让我开始思考od问题，如何拦截由其他脚本设置的事件处理程序？假设脚本A向元素添加了一个事件处理程序。我不希望使用off（）完全丢失它而是禁用temporarily@AtifMohammedAmeenuddin谢谢。这正是我想要的。很抱歉解释得不好。@AtifMohammedAmeenuddin-你不能，就这么简单。停止默认操作和传播只与默认的“html”事件有关。javascript中的事件处理程序触发的操作不能“关闭”只需在另一个事件处理程序中返回false，这不是它的工作方式，唯一的方法是在事件处理程序中使用标志，或者删除事件处理程序。@ZuzEL-我对委派方法进行了一些详细说明，这就是您要找的吗？这非常接近。我将在稍后接受它。这还不错，得到两个对一个答案进行投票，答案完全正确，我的意思是与问题中的代码完全相同？在javascript中，每个单词都很重要，因为它区分大小写，并且您更改了什么？但是在jQuery中返回false是preventDefault和StopperPropagation的快捷方式，因此它与OP使用的代码完全相同？除了OP的代码不适用于我和retu之外rn false；对我来说确实有效。这还不错，在一个答案上获得了两张赞成票，这是完全正确的，我的意思是与问题中的代码完全相同？在javascript中，每个单词都很重要，因为它区分大小写，您更改了什么？但是在jQuery中返回false是preventDefault和stopPropagation的快捷方式，因此它与OP的代码完全相同正在使用？除了OP的代码对我无效，返回false；对我有效。