javascript - 将鼠标悬停在选择框上时，Jquery 悬停功能会失灵

Question

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

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

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

这是 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();
});

Answer 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 未被子元素重叠。