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

谢谢!

Answer 1

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

   要执行此操作(防止进一步传播并防止触发当前元素上的任何其他事件处理程序)，您需要调用 stopImmediatePropagation() (相反，也)。

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

   但这并不会让事情变得更好，因为查找、枚举每个元素并将处理程序附加到每个元素的成本非常高。

   为了使其更好，您的选择是:

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

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