关于技术您现在的位置是:首页 > 关于技术

IE浏览器下,鼠标经过弹出下拉框,点击下拉框中的select后下拉框隐藏的问题

头像 2019-09-06 15:27:25 , 9 人已围观 0 条评论

简介

场景再现 首先是在IE浏览器下,当鼠标经过某元素a时,弹出一个下拉框,刚好下拉框中有一个select选择框,当 […]

场景再现

首先是在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>

小问题,大学问,我们,加油!

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号