将鼠标悬停在选择框上时，Jquery 悬停功能失火答案

【问题标题】：Jquery hover function misfires when hover on the select box将鼠标悬停在选择框上时，Jquery 悬停功能失火
【发布时间】：2012-08-10 11:07:57
【问题描述】：

我的要求是，当我将鼠标悬停在弹出窗口上并在表单上选择某些内容时，弹出窗口应该保持可见。

如果弹出窗口失去移动悬停，它应该被隐藏

下面的代码一切正常。但是当我尝试在选择框中选择选项时（选项从弹出窗口中下拉），弹出窗口被隐藏。

这是 JSFIDDLE 链接 http://jsfiddle.net/LNGz6/5/，此问题仅在 Internet Explorer

中出现

这里是代码

<div id="popup">
 <div class="label"> Search </div>
  <div class="control"> 
      <select name="searchval">
         <option value="entries">Entries</option> 
         <option value="bookings1">bookings1</option>
         <option value="bookings2">bookings2</option>
         <option value="bookings3">bookings3</option>
         <option value="bookings4">bookings4</option>
         <option value="bookings5">bookings5</option>
         <option value="bookings6">bookings6</option>
      </select>
   </div>
</div>

jQuery 函数

$("#popup").hover(function(){
   //do none
},function(){
   $(this).hide();
});

【问题讨论】：

也许这个问题会有所帮助：stackoverflow.com/questions/149573/…

标签： javascript jquery html cross-browser

【解决方案1】：

您会遇到这种行为，因为事件会在 DOM 树中冒泡并触发潜在的父事件处理程序。你有两个选择来解决这个问题：

1) 在select 元素上添加一个事件处理程序并停止事件冒泡：

$("select[name=searchval]").hover(function(e){
    e.stopPropagation();
});

2) 检查事件目标并防止隐藏：

$("#popup").hover(function(){
   //do none
},function(e){
   if (e.target == this){
      $(this).hide();
   }
});

Example 用于后者 - 隐藏仅在红色部分触发 - div 没有被子元素重叠。

【讨论】：

【解决方案2】：

我要做的是检查焦点是否在输入元素中：

$("#popup").hover(function() {
    //do none
}, function() {
    var $sel = $('select');
    if ($sel.is(":focus")) {
        console.log('do not hide');
        $sel.blur();
    } else {
        $(this).hide();
    }
});

例如here。

选择任何选项后，弹出窗口都不会隐藏。选择元素上的blur 方法是必要的，因为在选择选项后焦点将保持在该元素上，并且如果您悬停并再次离开框，则弹出窗口不会隐藏，以防您没有单击/focused 之前的任何其他元素。当您选择的是弹出窗口内的选项时，问题就来了。焦点将保持在选择上，您必须单击其他地方，这就是我现在所拥有的：\

最后，选择选择元素的方式不是最优的。在这种情况下，它会起作用，但如果您的 html 中有任何其他选择元素，则会出现冲突。因此，在标签中添加一个 id 或类，并修改选择器以确保它只影响该元素。

【讨论】：