弹出式浏览器不兼容性

问题描述：

我有一个弹出式菜单，上面有下拉菜单。为了测试目的，我缩小了它并简化了它，但它仍然不能按我想要/应该的方式工作。弹出式浏览器不兼容性

<!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>

当你点击输入字段时，出现'popup'，如果你点击红色边框外面，它会消失。如果你点击选择选项，它不应该消失！但是，在这一点上，Chrome浏览器不能像IE/FF/Opera/Safari一样工作，并且使得div消失。

（使用Chrome 4.0.295.0）

有谁知道一个变通的Chrome浏览器？
调用上的选择元素event.stopPropagation（）至今没有工作

答

这似乎是正确的行为在的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()）。

弹出式浏览器不兼容性

相关推荐