mouseleave导致mouseenter失效
mouseenter单独使用没有问题，但是当加入mouseleave后，第一次触发mouseenter正常，后面想再次触发mouseenter会失效，出现如下图情况。即使鼠标没有离开触发事件对象，mouseleave持续触发。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jindouyun</title>
<style>
*{
margin:0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.c-nav{
position: relative;
width:450px;
height:22px;
line-height: 22px;
margin:100px auto;
border:2px solid #eee;
text-align: center;
}
.c-nav ul{
position: relative;
margin-left:15px;
}
.c-nav ul li{
float:left;
margin:0 3px;
cursor: pointer;
}
.cloud{
position: absolute;
top:0;
left:0;
margin-left: 12px;
background-color: rgba(0,0,0,.5) ;
height:22px;
width:70px;
}
</style>
<script src="animation.js"></script>
</head>
<body>
<div class="c-nav" id="c_nav">
<span class="cloud"></span>
<ul>
<li><a href="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
</ul>
<script type="text/javascript">
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
var current = 0;
for(var i = 0; i < lis.length; i++){
lis[i].addEventListener('mouseover',function(){
animate(cloud,this.offsetLeft);
})
lis[i].addEventListener('mouseout',function(){
animate(cloud,0);
})
}
</script>
</div>
</body>
</html>
function animate(obj,target,callback){
//清除之前的定时器，保证当前只有一个定时器
clearInterval(obj.timer);
var timer = setInterval(function(){
//缓步移动
var step = (target - obj.offsetLeft) ;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft = target){
clearInterval(timer);
if(callback){
//调用函数
callback();
}
// callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
console.log("目标位置：" + target + ",每次移动步数：" + step);
}, 30);
}请问是代码出问题了吗，需要怎么修改
用mouseover和mouseout试试。
问题1是：
mouseover 和 mouseout 事件是可以冒泡的，子元素上触发的事件会冒泡到父元素上。
应该是改用 mouseleave 和 mouseenter 事件，这两个事件不冒泡。
问题2是：
定时器的返回值要赋值给obj.timer
obj.timer = setInterval(function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jindouyun</title>
<style>
*{
margin:0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.c-nav{
position: relative;
width:450px;
height:22px;
line-height: 22px;
margin:100px auto;
border:2px solid #eee;
text-align: center;
}
.c-nav ul{
position: relative;
margin-left:15px;
}
.c-nav ul li{
float:left;
margin:0 3px;
cursor: pointer;
}
.cloud{
position: absolute;
top:0;
left:0;
margin-left: 12px;
background-color: rgba(0,0,0,.5) ;
height:22px;
width:70px;
}
</style>
<script>
function animate(obj,target,callback){
var ml = parseInt((obj.currentStyle||getComputedStyle(obj,null)).marginLeft, 10);
//清除之前的定时器，保证当前只有一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//缓步移动
var ol = obj.offsetLeft - ml;
var step = (target - ol) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(ol == target){
clearInterval(obj.timer);
if(callback){
//调用函数
callback();
}
// callback && callback();
}
obj.style.left = ol + step + 'px';
console.log("目标位置：" + target + ",每次移动步数：" + step);
}, 30);
}
</script>
</head>
<body>
<div class="c-nav" id="c_nav">
<span class="cloud"></span>
<ul>
<li><a href="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
</ul>
<script type="text/javascript">
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
var current = 0;
for(var i = 0; i < lis.length; i++){
lis[i].addEventListener('mouseenter',function(){
animate(cloud,this.offsetLeft);
})
lis[i].addEventListener('mouseleave',function(){
animate(cloud,0);
})
}
</script>
</div>
</body>
</html>
请采纳，谢谢！
您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
animate应该是这个函数有问题，如果不加这个函数，只是在lis[i].addEventListener('mouseover',function(){}里console.log(‘9999’)。
lis[i].addEventListener('mouseout',function(){} 里console.log('离开')。触发是没问题的
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y