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-Tree并触发潜在的父事件处理程序。您有两种方法可以解决这个问题：

1）在select元素上添加一个Eventhandler并停止Event-Bubbling：

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

2）检查事件目标并防止相应隐藏：

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

Example对于后者 - 隐藏只触发红色部分 - 其中div不与子元素重叠。

Answer 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方法是必要的，因为在选择选项后焦点将保留在它上面，如果你将鼠标悬停并再次开箱，弹出窗口将不会被隐藏，以防你没有之前点击/聚焦任何其他元素。当您选择的是弹出窗口内的选项时，问题就出现了。焦点将保留在选择上，你必须点击其他地方，这就是我现在所拥有的：\

最后，选择选择元素的方式不是最佳的。在这种情况下，它可以工作，但如果你的html中有任何其他select元素，将会有冲突。因此，在标记中添加一个id或类，并修改选择器以确保它只影响该元素。

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

2 个答案: