Question

我在Internet Explorer 7/8下遇到以下问题：

我有一个弹出窗口，当用户将鼠标悬停在链接上时会被激活。弹出窗口是一个包含一些数据的简单<div>。在此<div>标记内，有一个<select>标记，其中包含<option>个<div个标记。我已将mouseover / mouseout事件附加到<select>＆gt;，以便当光标位于其上时此弹出窗口将保持打开状态。当您单击<option>然后将光标移动到任何<div>时，就会出现问题。这会触发{{1}}标记的mouseout事件并分别将其关闭。

如何阻止关闭IE中的弹出窗口？

Answer 1

您应该能够通过事件中的值来检测情况是否是您想要的情况。这有点令人费解，但似乎有效。

在外部div的事件处理程序中，执行以下操作：

<div onmouseover="if (isReal()) { toggle(); }"
     onmouseout="if (isReal()) { toggle(); }">
</div>

然后实现isReal方法：

function isReal() {
    var evt = window.event;
    if (!evt) {
        return true;
    }

    var el;
    if (evt.type === "mouseout") {
        el = evt.toElement;
    } else if (evt.type === "mouseover") {
        el = evt.fromElement;
    }
    if (!el) {
        return false;
    }
    while (el) {
        if (el === evt.srcElement) {
            return false;
        }
        el = el.parentNode;
    }
    return true;
}

基本上isReal方法只检测事件是否来自div内。如果是这样，那么它返回false，这避免了调用hide切换。

Answer 2

我的建议是在选择框有焦点时设置另一个标志。设置标志时不要关闭div。

Answer 3

当鼠标悬停在<options> s mouseover s <options>次{{1}}次事件时，如何重新显示div。

编辑：选项鼠标悬停的执行顺序和div的鼠标输出可能会导致问题。

Answer 4

在div的mouseout事件中，为div元素添加一个超时，它将在200毫秒左右隐藏div。

然后在div / select的mouseover事件中，select的click事件清除存储在div元素中的超时。

这会在隐藏div之前给出一个非常小的延迟，该div允许鼠标悬停或单击事件在执行之前清除超时。它不漂亮，但它应该工作。

Answer 5

而不是使用mouseout作为关闭div的事件，使用mouseleave，然后只有当指针离开div的边界时才触发事件，而不是当它移动到其中的其他元素时

Answer 6

您可以尝试专门为选项列表添加另一个鼠标悬停事件。

Answer 7

嗯，这种行为的原因是因为鼠标悬停/输出事件冒泡，这实际上意味着无论何时鼠标悬停在弹出窗口内的任何元素，弹出窗口也会收到该事件。

您可以阅读有关这些事件的更多here，以及有关事件冒泡的here。

这里有3个可能的解决方案：

将事件更改为onmouseenter / leave。你已经提到这没有帮助，这听起来很奇怪，因为这些不应该冒泡。
检查事件中与from / toElement相关的srcElement。

McKAMEY检查的改进版本将是：

function isReal() {
  var evt = window.event;
  if (!evt) {
      return true;
  }

  var el;
  if (evt.type === "mouseout") {
      el = evt.toElement;
  } else if (evt.type === "mouseover") {
      el = evt.fromElement;
  }
  if (!el) {
      return false;
  }
  // this will also return true if el == evt.srcElement
  return evt.srcElement.contains(el);
}

同样的事情，只是更短。

3。另一个选择是在弹出窗口下创建一个透明的，不可见的div，它覆盖了选择框下拉的区域。我假设它已经超出弹出窗口的实际区域。

希望这有帮助！

Answer 8

您是否尝试过hover而不是鼠标悬停/效果？

$(".myDiv").hover(function(){
    $(this).show();
}, function {
    $(this).hide();
});

Answer 9

这样的事情：

        <div id="trigger">
            Hover over me!
        </div>

    <div class="container">
        <select>
            <option>Blah</option>
            <option>Blah</option>
        </select>
    </div>


$("#trigger").mouseover(function(){
    $('.container).show();
});

$(".container").mouseleave(function(){
    $(this).hide();
});

基本思想是，当您将鼠标悬停在触发器上时显示容器元素，然后当您离开容器时隐藏容器。您需要定位容器，使其夹住触发元素，否则它会立即隐藏。

Answer 10

为什么<div>上有mouseover / mouseout？为什么不在鼠标上显示<div>，然后设置<body onmouseover="hidedivs();">我不知道这是否有效，但如果<div>位于正文的顶部，那么{ {1}}应保持可见。

Answer 11

许多人发布解决方案/示例似乎没有意识到一件事：<div>上的onmouseout事件在<select>上的onmouseover事件之前触发。

当<div>失去焦点（onmouseout）时，不要立即关闭它，而是在500毫秒后关闭它。如果在此期间<select>获得焦点（鼠标悬停），则根本不要关闭<div>（clearTimeout）。

另外，尝试使用事件传播/冒充。

Answer 12

鉴于IE中的选择是一个痛苦，特别是当涉及整个分层问题，其中选择出现在div上方，即使它不应该，我可以指向YUI的菜单按钮控件的方向。它们看起来非常好，易于实现并且不会导致此问题

这是一个链接：http://developer.yahoo.com/yui/examples/button/btn_example07.html

Answer 13

您应该在event.stopPropagation()中使用<select>，或在cancelBubble()元素本身使用<select>。

Internet Explorer和<select>标记问题</select>

13 个答案: