JQuery几个mouse事件的区别和用法
jQuery常用的Mouse事件有7种，分别是：
- mouseup：鼠标在元素上松开时触发 mouseup 事件。与 click 不同，只要鼠标在元素上松开即触发。
- mousedown：鼠标在元素上并按下时触发 mousedown 事件。与 click 不同，只要鼠标在元素上按下即触发。
- mouseover：当鼠标位于元素上时触发 mouseover 事件，通常与 mouseout 配合使用。
- mouseenter：当鼠标位于元素上时触发 mouseenter 事件，通常与 mouseleave 配合使用。
- mousemove：鼠标在元素上移动时触发 moudemove 事件。
- mouseout：鼠标在元素上移开时触发 mouseout 事件。
- mouseleave：鼠标在元素上移开时触发 mouseleave 事件。
mouseup 和 mousedown 没什么好解释的，主要说一下 mouseover 和 mouseenter ； mouseout 和 mouseleave 的区别。
其实如果是一个单独的元素，也并看不出什么问题，而且我们也常用 mouseover 和 mouseout 组合。
但是今天在写一个QQ在线客服插件时出现了问题，我写了一个 0.3秒 的动画效果，鼠标划入显示，划出隐藏，鼠标在上面移动时，插件不停地显示隐藏好多次。
原来这两个组合是由区别的，一个单独的元素时效果几乎是一样的，问题就在于它们的子元素。
mouseover 和 mouseout 鼠标划入子元素，再次划入父元素时即再次触发，如果该元素包含子元素，鼠标在上面划动时即会触发多次。
我写了 7 个 div 标签，每个 div 标签内包含 3 个 p 标签，分别对应以上事件，触发时 console.log( ) 111、222 ...... 777。
HTML部分代码：
<div class="one">
<p>mouseup</p>
<p>mouseup</p>
<p>mouseup</p>
</div>
<div class="two">
<p>mousedown</p>
<p>mousedown</p>
<p>mousedown</p>
</div>
<div class="three">
<p>mouseover</p>
<p>mouseover</p>
<p>mouseover</p>
</div>
<div class="four">
<p>mouseenter</p>
<p>mouseenter</p>
<p>mouseenter</p>
</div>
<div class="five">
<p>mousemove</p>
<p>mousemove</p>
<p>mousemove</p>
</div>
<div class="six">
<p>mouseout</p>
<p>mouseout</p>
<p>mouseout</p>
</div>
<div class="seven">
<p>mouseleave</p>
<p>mouseleave</p>
<p>mouseleave</p>
</div>简单设置一下CSS，添加背景色：
div{
width: 120px;
float: left;
margin: 10px;
background: #5a5a5a;
}
p{
height: 20px;
width: 100px;
margin: 10px;
background: #3EBBB5;
text-align: center;
color: #FFF;
}js 代码如下：
$(function(){
$('.one').mouseup(function(){
console.log(111);
})
$('.two').mousedown(function(){
console.log(222);
})
$('.three').mouseover(function(){
console.log(333);
})
$('.four').mouseenter(function(){
console.log(444);
})
$('.five').mousemove(function(){
console.log(555);
})
$('.six').mouseout(function(){
console.log(666);
})
$('.seven').mouseleave(function(){
console.log(777);
})
})点击事件就不演示了，3-7 分别用鼠标从下划入从上划出，在自上往下划，检查控制台打印的次数。
打印结果如下图， mouseover 和 mouseout 在包含子元素的情况下会多次触发，mouseover 即使不包含子元素也会不断触发，mouseenter 在鼠标划入时触发一次，mouseleave 在鼠标划出时触发一次。
明天把QQ聊天插件发出来，先放链接：QQ聊天插件，鼠标划入划出显示隐藏效果。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-11)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读