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. 当由于返回 false/stopPropagation 而不应进一步传播时，为什么在“1”之后将“2”写入控制台？
2. 我还能如何使用 jQuery 实现我的目标？

谢谢！

Answer 1

1. stopPropagation() 防止事件在祖先树上进一步传播。但是，它不会阻止当前的剩余事件处理程序被触发。

   要做到this（防止进一步传播和防止当前元素上的任何进一步事件处理程序被触发），您需要调用stopImmediatePropagation()（而不是也是）。

2. 以这种方式将事件处理程序附加到每个元素，并调用stopImmediatePropagation()（以及preventDefault()）将阻止所有点击生效； 提供没有事件处理程序被绑定之前（因为处理程序是按顺序执行的；您不能撤消已经触发的处理程序）。

   这并不能使它很好，因为查找、枚举和将处理程序附加到每个元素都非常昂贵。

   为了使它更好，您的选择是：

   1. 将click 事件附加到document，只需preventDefault() 并牺牲stopImmediatePropagation()。

   2. 在每个事件处理程序中检查#user 的状态；您可以通过滚动自己的包装函数来减轻这种痛苦；

      function checkUserState(then) {
          return function () {
              if ($("#user").val() !== "admin") {
                  then.apply(this, arguments);
              }
          };
      };
      

      ... 像这样使用；

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

   正如 cmets 中所述，我有意避免使用事件委托的建议，因为虽然只允许附加一个事件处理程序而不是 n，但它不允许您附加 stopPropagation() 的事件。