忽略jQuery stopPropagation

Question

我的目标是防止所有单击事件(单击时隐藏/显示HTML中的元素)，除非满足某个条件(用户在输入元素中有一个特定的单词)。

因此，我试图将该逻辑添加到文档或"html“的单击处理程序中，但另一个元素的单击处理程序是首先触发的，原因是冒泡。

因此，我尝试将该逻辑附加到"*"，现在单击处理程序首先触发，但也将其传播到另一个元素，忽略stopPropagation、preventDefault并返回false。

$(document).ready(function(){    
  $("*").click(function(event){
    if ($("#user").val() !== "admin"){
      console.log("1");
      event.stopPropagation();
      event.preventDefault();  
      return false;  
    }
  });
  $("#user").click(function(event){
    console.log("2");
    // do something
  });
});

1. 为什么"2“写到控制台后"1”，而不应该有任何进一步的传播，因为返回假/停止传播？
2. 否则，我如何使用jQuery实现我的目标？

谢谢!

Answer 1

1. stopPropagation()防止事件在祖先树上传播。但是，它并不阻止当前上的其余事件处理程序被触发。 要做到这一点(防止进一步传播并防止当前元素上的任何进一步事件处理程序被触发)，您需要调用stopImmediatePropagation() (而不是同样)。
2. 以这种方式将事件处理程序附加到每个元素，并调用stopImmediatePropagation() (以及preventDefault())将阻止所有单击产生效果；在此之前不绑定事件处理程序(因为处理程序是按顺序执行的；不能撤消已经触发的处理程序)。 但是，这并不是很好，因为查找、枚举和在每个元素上附加一个处理程序都是非常昂贵的。 为了做得更好，你的选择是：

1. Attach a `click` event to `document`, and simply `preventDefault()` and sacrifice `stopImmediatePropagation()`.
2. Check the state of `#user` in each event handler; you can ease the pain of this by rolling your own wrapper function;

函数checkUserState(然后){返回函数() { if ($("#user").val() !== "admin") {then.apply(此，参数)；} }；}；

..。像这样使用；

$("#user").click(checkUserState(function(event){ console.log(“2”；})；

正如注释中所指出的，我有意避免使用事件委托的建议，因为当允许只附加一个事件处理程序而不是n时，它不允许您使用事件的stopPropagation()。