跨浏览器-JQuery/Javascript:IE悬停不't覆盖选择框选项
cross browser - JQuery/Javascript: IE hover doesn't cover select box options?
我有这个脚本可以在mouseover上加宽文本框,在mouseoff上缩短文本框。
我遇到的问题是,Internet Explorer似乎没有扩展它的悬停在选择框的选项上。
这意味着在IE中,我可以点击选择,下拉选项,但如果我尝试选择一个,它们就会消失,并且一旦我离开选择框,选择框就会重新调整大小。
示例代码:
<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
function(e){
$('#TheText').val('OVER');
$(this).width( 600 );
},
function(e){
$('#TheText').val('OUT');
$(this).width( 50 );
}
);
});
</script>
和:
<input type='text' id='TheText' /><br /><br />
<select id='TheSelect' style='width:50px;'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
<option value='5'>Five</option>
<option value='6'>Six</option>
<option value='7'>Seven...</option>
</select>
IE中的选择框有什么解决办法吗?如果有人能推荐一个真正可靠的jquery替代品,我甚至会考虑它。
谢谢!
看起来这篇文章已经发布了一段时间,但希望仍然有人对解决方法感兴趣。我在建立一个我正在开发的新网站时遇到了这个问题。上面有一个产品滑块,对于每种产品,鼠标滑过产品会弹出一个大的信息气泡,其中包含有关产品的信息、一个用于选择购买选项的下拉列表和一个购买按钮。我很快发现,每当我的鼠标离开选择菜单的初始可见区域(即,试图选择一个选项)时,整个气泡就会消失。
答案(感谢开发jQuery的聪明人)都是关于事件冒泡的。我知道解决这个问题最直接的方法是暂时"禁用"悬停的退出状态。幸运的是,jQuery内置了处理事件冒泡的功能(他们称之为传播)。
基本上只有一行左右的新代码,我在下拉列表的"onmouseleave"事件上附加了一个方法(将鼠标悬停在选择列表中的一个选项上似乎可以可靠地触发此事件——我尝试了其他一些事件,但这一个似乎非常可靠),它关闭了事件传播(即,不允许父元素从下拉列表中听到"onmouselve"事件)。
就是这样!解决方案比我预期的要优雅得多。然后,当鼠标离开气泡时,悬停的退出状态会正常触发,网站就会继续它的业务。这是修复方法(我把它放在文档中。准备好了):
$(document).ready(function(){
$(".dropdownClassName select").mouseleave(function(event){
event.stopPropagation();
});
});
显然IE没有考虑select元素的下拉位部分。这是可行的,但需要使用expando属性和模糊/聚焦事件来启用和禁用"隐藏"效果,以在鼠标进入元素的下拉部分时阻止它进入。
试试这个:
$(function() {
var expand = function(){ $(this).width(600) }
var contract = function(){ if (!this.noHide) $(this).width(50) }
var focus = function(){ this.noHide = true }
var blur = function(){ this.noHide = false; contract.call(this) }
$('#TheSelect')
.hover(expand, contract)
.focus(focus)
.click(focus)
.blur(blur)
.change(blur)
});
(如果不应该这样使用jQuery,我深表歉意——我以前从未使用过它:)
WorldWideWeb的答案非常有效。
我有一个稍微不同的问题,我在表单字段的包含项上有悬停效果(悬停以显示选择菜单),在IE上用户无法从下拉菜单中进行选择(它不断重置值)。我添加了worldwideweb的建议(带有select的ID)和中提琴,效果很好。
我就是这么做的:
$(".containerClass").hover(function() {
$(this).children("img").hide();
$('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
$(this).children('img').show();
$('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
});
我有一个基于悬停隐藏/显示的表单。如果用户将注意力集中在选择上,则表单将被隐藏。我用这样的东西解决了我的问题:
element.find('select').bind('mouseenter mouseleave',function(){
//Prevent hover bubbling
return false;
});
也有同样的问题,WorldWideweb的答案在IE8上运行得很好。我只是做了一个小小的更改,从选择器中删除了"select",因为我在选择器中包含了选择框的类。让它成为一个非常简单的解决方案。
此外,我在一个使用hoverIntent jquery插件的菜单上实现了它,没有任何问题。(无干扰)。
- 选择所有td's基于所选内容覆盖多行
- 文本框的 CSS 文本选择覆盖
- 谷歌地图api 3使用覆盖选择地点的类型
- 表,并选择要传递到新页面的rRow(id)(这样它就不会覆盖行选择的变量)
- 覆盖eonasdan日期时间选择器中禁用日期的样式
- 动态覆盖jqueryUI对话框按钮(保存,取消等到用户选择)文本
- CSS 样式被覆盖 - 选择器不够具体
- 引导日期时间选择器 - 覆盖单击日历图标事件
- 我可以覆盖jQueryUI自动完成中的选择选项吗?
- 将下拉覆盖长度选择更改为按钮-jQuery DataTables
- 覆盖所有类的css选择器(*selector)
- 序列化似乎会覆盖多个选择框和复选框上的值
- jquery添加元素,然后选择(用于覆盖)添加的文本
- 我怎样才能带一个'sencha'当我使用覆盖时,选择字段进入视图
- 用jquery覆盖WordPress插件中用于日期选择器的本地化文件
- 在浏览器中覆盖OSX按住重音选择器
- 如何用类选择器覆盖id选择器的jQuery事件处理程序
- 淘汰动态
- 谷歌翻译覆盖选择更改事件
- 跨浏览器-JQuery/Javascript:IE悬停不't覆盖选择框选项