弹出浏览器不兼容答案

【问题标题】：Popup browser incompability弹出浏览器不兼容
【发布时间】：2011-01-07 05:31:44
【问题描述】：

我有一个带有下拉菜单的弹出窗口。出于测试目的，我已经按比例缩小并简化了它，但它仍然不能按照我想要的/应该的方式工作。

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script type="text/javascript">
  jQuery(document).ready(function(){    
    jQuery('.trigger').click(function(){
      var picker = jQuery('.popup');
      jQuery('<div></div>').css({
        height: screen.height, 
        width: screen.width, 
        position: 'absolute',
        'z-index': -1,
        top: picker.offset().top*-1, 
        left: picker.offset().left*-1,
        border: '1px solid red'
      }).click(function(){
         picker.trigger('focusout');
         jQuery(this).hide();
      }).prependTo(picker); 
      picker.css('visibility', 'visible');
    });
    jQuery('.popup').live("focusout", function() {
      jQuery('.popup').fadeTo(500, 0.0, function() {
        jQuery('.popup').css('visibility', 'hidden');
        jQuery('.popup').css('opacity', '1.0');
      });
    });
  });  
  </script>
</head>
<body>
  <p>
    <input type=text class=trigger />
    <div id=popup-div class=popup style="visibility: hidden; border: 1px solid red">        
        <select>
        <option>option1</option>
        </select>
        <p>Popup text</p>       
    </div>
  </p>
</body>

当您单击输入字段时，会出现一个“弹出窗口”，如果您在红色边框之外单击它会消失。如果您单击选择选项，它不应该消失！但是在这一点上，Chrome 的工作方式与 IE/FF/Opera/Safari 不同，并且会使 div 消失。

（使用 Chrome 4.0.295.0）

有人知道 Chrome 的解决方法吗？
到目前为止，在选择元素上调用 event.stopPropagation() 不起作用

【问题讨论】：

标签： jquery browser popup google-chrome

【解决方案1】：

这似乎在 Chrome 5.0.375.23 中表现正确，但是我会稍微改变一下以在包括 Chrome 4 在内的所有浏览器中保持一致的行为，因为 focusout 不一定是首先不能有focus 的元素上的有效事件。这里更好的方法是利用冒泡和事件顺序。为此，您需要替换它：

jQuery('.popup').live("focusout", function() {
  jQuery('.popup').fadeTo(500, 0.0, function() {
    jQuery('.popup').css('visibility', 'hidden');
    jQuery('.popup').css('opacity', '1.0');
  });
});

有了这个：

jQuery('.popup, .trigger').live('click', function(e) {
  e.stopImmediatePropagation()
});
jQuery(document).click(function() {
  jQuery('.popup:visible').fadeTo(500, 0.0, function() {
    jQuery(this).css('visibility', 'hidden').css('opacity', '1.0');
  });
});

如果click 源自弹出元素或触发器（打开它），则不会执行隐藏操作，因为在同一元素上执行此事件的处理程序 (document)被阻止（就像泡沫一样，但这在上面的代码中并不重要）。尽管.live() 存在于文档中，但使用event.stopImmediatePropagation()，您可以阻止同一级别的处理程序在稍后绑定时执行，因为处理程序按照它们绑定的顺序执行。

作为.stopPropgation() 的旁白：如果您将其更改为仅event.stopPropagation()，则另一个处理程序仍会执行，隐藏弹出窗口（尽管您可以使用event.stopProgation() 并在第二个处理程序中检查event.isPropogationStopped()）。

【讨论】：