前言
onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中时触发的事件,而onmouseout是移出dom元素时触发的事件.它们即使在ie低版本也有良好的兼容性.
说明
我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开"鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover事件鼠标离开子元素灰色框时也会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover事件综上所述,父元素绑定事件,鼠标进入或者离开子元素都会先触发父元素的onmouseout事件,再触发onmouseover事件
实际应用
实际开发场景中,鼠标移入菜单栏出现下拉列表功能非常常见.如果下拉列表和产品分类之间紧贴着没有间隙实现很简单将产品分类这个按钮设置为相对定位,下拉列表放入到产品分类标签里面作为子元素并设置为绝对定位最后只需要对产品分类按钮绑定onmouseover事件触发时显示下拉列表,绑定onmouseout事件触发时隐藏下拉列表
间隙情况
如果设计图要求下拉列表不和产品分类按钮紧挨着而是中间留一小段间隙再用上述的方法就不适用了为什么会造成这种情况?当鼠标移出产品分类按钮时,就会触发onmouseout事件隐藏下拉列表这样就会造成用户鼠标移入产品分类按钮想点击下拉列表某项时一移动到间隙处下拉列表就消失了
应对方法
此时再对产品分类按钮做事件绑定很难处理有间隙的情况,我们可以转而对最外面的红框绑定事件,因为间隙也在红框内
onmouseover的触发函数可以获取event对象,event.target为当前鼠标移入的dom元素
通过对最外层的红框绑定onmouseover事件,在其触发函数中判断如果鼠标进入的是产品分类这个按钮时才显示下拉列表
再对红框绑定onmouseout事件,它的event.target是最后即将移出红框时(进入或离开子元素时也会触发)鼠标所在的dom元素
那就可以在onmouseout的触发函数里判断排除从产品分类按钮里面离开的情况,其他情况都直接隐藏下拉框
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!--jquery的cnd地址,如果失效请自行引入jquery-->
<script src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.container{
width:960px;
margin:0px auto;
height:100px;
border:1px solid red;
}
.item{
width: 126px;
height: 30px;
line-height: 30px;
background-color: #eee;
margin-top: 32px;
margin-left: 40px;
text-align: center;
position:relative;
}
.drop-down{
width: 100px;
height: 184px;
background: #999;
position: absolute;
left: 12px;
top: 40px;
display: none;
}
</style>
</head>
<body>
<div class="container" id="main">
<div class="item">
产品分类
<div class="drop-down" id="drop">
<ul>
<li>服务器</li>
<li>CPU</li>
<li>机箱</li>
<li>硬盘</li>
<li>SSD</li>
<li>显卡</li>
</ul>
</div>
</div>
</div>
</body>
<script>
$("#main").on("mouseover",(e)=>{
var target = e.target;
if($(target).hasClass("item") || $(target).parents(".item").length>0){
$("#drop").show();
}
})
$("#main").on("mouseout",(e)=>{
var target = e.target;
if(!$(target).hasClass("item")){
$("#drop").hide();
}
})
</script>
</html>
