鼠标事件

最新推荐文章于 2024-05-03 16:02:01 发布

原创最新推荐文章于 2024-05-03 16:02:01 发布 · 304 阅读

CC 4.0 BY-SA版权

开发工具与关键技术：DW
作者：冯超
撰写时间：2019年1月30日

mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入
mouseleave表示鼠标离开
mouseout表示鼠标离开
进入事件有3个 mousemove mouseenter mouseover
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用
mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover：当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用
代码如下：
<!doctype html>

鼠标事件

div{
background-color:#1AFF00;
margin:20px;
padding:10px;
}
.subDiv{
background-color:#2A00FF;
margin:10px;
}
.parentDiv{
background-color:#FF0004;
height:80px;
}
table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td{
border: 1.5px solid #d1d1d1;
vertical-align:top;
padding:20 0;
}

事件	效果演示
mousedown mouseup	鼠标按下弹起测试
mousemove mouseenter mouseover mouseleave mouseout	mousemove 当鼠标进入元素，每移动一下都会被调用次数0 mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用次数0 mouseover 当鼠标进入元素，调用一下，在其中移动，不调用次数0 mouseleave 当鼠标离开元素，调用一下次数0 mouseout 当鼠标离开元素，调用一下 0
mouseenter mouseover	mouseenter 经过其子元素不会被调用次数0 div中的子元素 mouseover 经过其子元素会被调用次数0 div中的子元素
mouseleave mouseout	mouseleave 经过其子元素不会被调用次数0 div中的子元素 mouseout 经过其子元素会被调用次数0 div中的子元素

script $(function(){ $("#downup").mousedown(function(){ $(this).html("鼠标按下"); }); $("#downup").mouseup(function(){ $(this).html("鼠标弹起"); }); var moveNumber =0; var enterNumber =0; var leaveNumber =0; var overNumber =0; var outNumber =0; var enterNumber1 =0; var overNumber1 =0; var leaveNumber1 =0; var outNumber1 =0; $("#move").mousemove(function(){ $("#move span.number" ).html(++moveNumber); }); $("#enter").mouseenter(function(){ $("#enter span.number" ).html(++enterNumber); }); $("#leave").mouseleave(function(){ $("#leave span.number" ).html(++leaveNumber); }); $("#over").mouseover(function(){ $("#over span.number" ).html(++overNumber); }); $("#out").mouseout(function(){ $("#out span.number" ).html(++outNumber); }); $("#enter1").mouseenter(function(){ $("#enter1 span.number" ).html(++enterNumber1); }); $("#over1").mouseover(function(){ $("#over1 span.number" ).html(++overNumber1); }); $("#leave1").mouseleave(function(){ $("#leave1 span.number" ).html(++leaveNumber1); }); $("#out1").mouseout(function(){ $("#out1 span.number" ).html(++outNumber1); }); });

演示效果如下图：

在这里插入图片描述