Question

突然出现一个小问题：

$("*").on("click", function(event) {
if ($$(event.target).hasClass("disabled"))
{
    event.preventDefault();
    event.stopPropagation();
    return; 
}
});

应该向每个元素添加一个事件，如果元素具有“禁用”类，则阻止click事件被任何其他事件处理程序处理。

我认为这是一个非常简单和基本的应用程序，但它似乎只适用于链接，a-tag-elements，但不适用于任何普通元素，在我的情况下只是处理点击事件。

我尝试了一些变体，返回false，stopImmediatePropagation等，但结果相同。我错过了什么？我的脚本中的'where'是否重要，我添加了这个事件处理程序？是否有绑定事件处理程序的执行顺序或什么？

Answer 1

你要做的事情有几个问题。

首先，您的代码只会将事件处理程序附加到已经在页面上的元素，因为这些是jQuery可以为$（“*”）集合选择的唯一元素。 / p>

其次，如评论中所述，您的代码会将事件处理程序附加到页面上的每个元素，这可能会非常慢，具体取决于该特定页面上的元素数量。

第三，事件处理程序根据它们所附加的元素（子元素处理程序在父事件处理程序之前执行）以及它们绑定的顺序按特定顺序执行。

我可以建议三种可能的方法，具体取决于您实际想要完成的内容以及您愿意更改的代码量。

如果您只是想让禁用的链接和按钮不起作用，那么您可以使用delegated事件处理来禁用默认浏览器功能。

$(document).on("click", "a, button", function(e) {
    e.preventDefault();
});

如果您尝试禁用已添加到页面的自定义功能，则最好添加由所有其他功能检查的全局变量。这需要更改许多不同的代码片段，这有时是不可行的，但是能够仅使用var doAnything = false;关闭页面可能会很好。请记住，如果您选择这种方式，那么客户端将能够轻松地从控制台重新打开功能。

您可以解决此问题的第三种方法是向绑定点击事件的每个选择器添加:not(.disabled)。

如果你改变了这个

$(".add").click(function(e) {
    // Do something
});

到此

$(".add:not(.disabled)").click(function(e) {
    // Do something
});

然后那也可以。

通用选择器.on事件句柄不绑定？

1 个答案: