JQuery/Javascript：IE 悬停不包括选择框选项？答案

【问题标题】：JQuery/Javascript: IE hover doesn't cover select box options?JQuery/Javascript：IE 悬停不包括选择框选项？
【发布时间】：2013-05-31 00:12:06
【问题描述】：

我有这段脚本可以在鼠标悬停时加宽文本框并在鼠标悬停时缩短文本框。

我遇到的问题是 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。

谢谢！

【问题讨论】：

标签： javascript cross-browser

【解决方案1】：

看起来这篇文章已经发布了一段时间，但希望仍有人对解决方法感兴趣。我在构建我正在开发的新站点时遇到了这个问题。它上面是一个产品滑块，对于每个产品，将鼠标悬停在产品上会弹出一个带有产品信息的大信息气泡、一个选择购买选项的下拉菜单和一个购买按钮。我很快发现，只要我的鼠标离开选择菜单的初始可见区域（即尝试选择一个选项），整个气泡就会消失。

答案（感谢开发 jQuery 的聪明人）是关于事件冒泡的。我知道解决问题的最直接方法是暂时“禁用”悬停状态。幸运的是，jQuery 内置了处理事件冒泡的功能（他们称之为传播）。

基本上，只有大约一行左右的新代码，我将一个方法附加到下拉列表的“onmouseleave”事件（将鼠标悬停在选择列表中的一个选项上似乎可以可靠地触发此事件 - 我尝试了其他事件很少，但这个似乎相当可靠）关闭了事件传播（即，不允许父元素从下拉列表中听到“onmouseleave”事件）。

就是这样！解决方案比我预期的要优雅得多。然后，当鼠标离开气泡时，悬停状态正常触发，站点继续其业务。这是修复（我把它放在document.ready）：

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

【讨论】：

对我来说不是很好，我在悬停时确实移动了下拉菜单和选项，这仍然会导致在 IE 中跳转。我可以看到它如何解决大多数人的问题

【解决方案2】：

显然 IE 不考虑选择元素的下拉位部分。这是可行的，但需要使用 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 - 我以前从未使用过它:)）

【讨论】：

【解决方案3】：

WorldWideWeb 的回答非常有效。

我有一个稍微不同的问题，我对表单字段的包含项（悬停以显示选择菜单）有悬停效果，并且 IE 用户无法从下拉列表中选择（它一直在重置值） .我添加了worldwideweb的建议（带有选择的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(); });

});

【讨论】：

【解决方案4】：

我有一个基于悬停隐藏/显示的表单。如果用户专注于选择，则表单将被隐藏。我能够通过以下方式解决我的问题：

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

【讨论】：

【解决方案5】：

遇到了同样的问题，WorldWidewebb 的回答在 IE8 上运行良好。我只是做了一点改动，从选择器中删除了“select”，因为我在选择器中包含了选择框的类。使它成为一个非常简单的修复。

另外，我在一个使用 hoverIntent jquery 插件的菜单上实现了它，没有任何问题。（无干扰）。

【讨论】：