我有一个弹出式菜单,上面有下拉菜单。为了测试目的,我缩小了它并简化了它,但它仍然不能按我想要/应该的方式工作。弹出式浏览器不兼容性
<!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()至今没有工作