场景再现

首先是在IE浏览器下，当鼠标经过某元素a时，弹出一个下拉框，刚好下拉框中有一个select选择框，当我们点击 select 选择框之后，弹出的下拉框就莫名其妙的隐藏了。

我们的期望是只有鼠标离开元素a时才让下拉框隐藏，而 select 选择框在元素a内部，我们点击 select 选择框时是不希望下拉框隐藏的。

<div id="a">
  <a href="javascript:;">鼠标经过弹出</a>
  <div id="b" style="display:none;">
    <select>
      <option>选择1</option>
      <option>选择2</option>
    </select>
  </div>
</div>

// 这里假设我们已经引入了jQuery
<script>
  $("#a").mouseover(function(){
    $("#b").show();
  }).mouseout(function(){
    $("#b").hide();
  })
</script>

原因分析

鼠标进出元素时，通过 window.event.toElement 检测 mouseover 和 mouseout 事件指向。

在IE下，点击 select 进入 option 之后，它的值为null，意味着鼠标已经离开了元素a，所以就触发了mouseout 事件，把元素b隐藏掉了。

解决方案

就是在点击 select 时阻止元素b隐藏。如何阻止？

if(window.event.toElement == null) return;

即在触发 mouseout 事件时，判断鼠标指向是否为null，若为null，则return出去，阻止执行让元素b隐藏的代码。

<script>
  $("#a").mouseover(function(){
    $("#b").show();
  }).mouseout(function(){
    if(window.event.toElement == null) return;
    $("#b").hide();
  })
</script>

一般情况下，这个问题就算解决了，但是当我们的鼠标指向文档外（比如浏览器地址栏）时，window.event.toElement 的值也为null，如果上面demo中，我们的元素a刚好在页面顶部，紧靠着浏览器地址栏的位置上，我们鼠标离开元素a移动到地址栏上方去，因为我们判断 window.event.toElement  的值为null时return出去了，那么本该隐藏的元素b却没有隐藏掉，这不是我们希望看到的。

最佳方案

if(document.all && window.event.toElement == null) return;

我们还要判断鼠标是否还在页面文档中，如果鼠标还在页面上，并且指向为null了，我们再 return 出去，这样就完美解决了。

<script>
  $("#a").mouseover(function(){
    $("#b").show();
  }).mouseout(function(){
    if(document.all && window.event.toElement == null) return;
    $("#b").hide();
  })
</script>

小问题，大学问，我们，加油！