关于技术您现在的位置是:首页 > 关于技术
IE浏览器下,鼠标经过弹出下拉框,点击下拉框中的select后下拉框隐藏的问题
2019-09-06 15:27:25 【Javascript, jQuery】 740 人已围观 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>
小问题,大学问,我们,加油!