jquery - JQuery 中的 window.click 事件问题

Question

我有一个常见的场景，当单击窗口时会关闭弹出 div。我使用的代码是

   $(window).load(function (){
   $('.popupstyle').live("click", function(e){
       return false;
    });
    });
   $(document).ready(function(){
   $(window).click(function(){
   $('.popupstyle').hide();
    });
  });

但问题是没有像 LinkBut​​ton 这样的控件的回发事件正在弹出 div 上工作。在弹出 div 的单击事件中返回 false 会产生问题。它融合了弹出 div 上的所有内容。不明白如何解决一件事会干扰另一件事。现场活动也不适用于第一次点击。有什么建议么

Answer 1

@sushanth 是对的。这是因为事件冒泡，这是一个重要的核心 js 概念。$('.popupstyle').live("click"虽然在有 2 个侦听器 ( , )的情况下它会绊倒你，$(window).click但我们也可以利用冒泡来发挥我们的优势，并使用单个侦听器 ( $(window).click) 执行相同的任务。

  $(window).click(function(e){
       if( ! $(e.target).hasClass('popupstyle') ){ $('.popupstyle').hide(); } 
  });

演示

Answer 2

原因是事件冒泡，子元素的事件冒泡到父元素。

防止这种情况的一种方法是在遇到目标元素时使用e.stopPropagation()

检查小提琴