如何禁用div的子元素上的所有onClick

Question

我有一个id为registerModal的div。 我想在div中禁用所有'click'事件。 例如，我有以下内容：

<a id="instagram-login-btn" class="inst-btn" href="">

</a>

以下内容：

$('#instagram-login-btn').on('click', function (event) {

});

我试过做：

$('#registerModal').off('click', '**');

但这没有成功。 是否有其他方法可以禁用子元素div上的所有点击？

Answer 1

使用由类的存在禁用的事件委派。

var modal = $('#registerModal');

modal.on('click', "#instagram-login-btn:not(.disabled)", function(event) {
    // the handler
});
modal.on("click", "#another_element:not(.disabled)", function(event) {
    // the handler
});

然后要禁用它们，请添加disabled类。

$("#registerModal *").addClass("disabled");

并删除要启用的类。

$("#registerModal *").removeClass("disabled");

这些是在所有嵌套元素上添加/删除类，但您的实际代码可以更具针对性。

---

没有类的另一种方法是绑定处理程序，以阻止事件传播到嵌套元素。

var modal = $('#registerModal');

modal.on('click', "#instagram-login-btn", function(event) {
    // the handler
});
modal.on("click", "#another_element", function(event) {
    // the handler
});

然后要禁用它们，请使用处理程序停止冒泡

$("#registerModal *").on("click", function(event) { event.stopPropagation() });

并删除要启用的处理程序。

$("#registerModal *").off("click");

同样，选择应该针对实际期望的元素。

Answer 2

尝试

$('#registerModal').find('*').addBack().off('click',);

Answer 3

要设置每个，并验证，我总是在循环中进行。 如下：

  $('#registerModal').find("*").each(function(i,e)
  {

      $(this).unbind("click");
  });

所有答案都是实用正确的，但我倾向于注意到使用$ .each进行多个事件处理时更稳定的行为。