Question

我有一个带有下拉菜单的弹出窗口。为了测试目的，我把它缩小并简化了，但它仍然不能按我想要的方式工作。

<!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的解决方法吗？
到目前为止，对select元素调用event.stopPropagation（）不起作用

Answer 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来自弹出元素或触发器（打开它），则不会执行隐藏操作，因为在同一元素上执行此事件的处理程序（{{ 1}}）被阻止（泡沫也是如此，但在上面的代码中无关紧要）。即使.live()存在于文档中，使用event.stopImmediatePropagation()也可以阻止同一级别的处理程序在以后绑定时执行，因为处理程序按绑定的顺序执行。

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

弹出浏览器兼容性

1 个答案: