0

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

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

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

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

2 回答 2

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

后者的示例- 隐藏仅在红色部分触发 - div 没有被子元素重叠。

于 2012-08-10T12:08:16.467 回答
0

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

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

这里的例子。

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

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

于 2012-08-10T11:52:29.003 回答