JS新手常见bug：新节点的事件问题&mouseout和mouseleave的区别
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
今天这个BUG
对于新手来说特别具有代表性
所以大家一定要看完哈
注意看现在有个弹框
我把它点一下
我们再悬浮上来就没有反应了
什么问题呢
我们来看一下啊
他在这是用这块写的
给这个.down加了一个on的事件
里面有mouseover和mouseout
那么这个.down是哪个呢
我们来看一下
大概就是这个点
那么为什么删除一遍
在悬浮上没反应了呢
原因是啊
他在删除的时候每次都会
重新load一遍数据
那load的逻辑就是
先清空整个这个大的容器
然后里面重新去画LI啊
包括里面这个.down的这个DIY
所以啊在他第一次删完之后
相当于原来注册的事件
这段代码不会再走一遍
所以呢
新加上去的元素是没有这个事件的
那怎么解决这问题呢
我们要找到他没有被删掉的这个元素
就是这个LI和OL这个斑点
我们在这上面写按时间
那有同学会说
他岂不是触发的元素就不对了吗
对所以我们要在这里边把这个
加一个判断
首先呢我们把target
接收过来
我们来判断一下这个target呀
.is 是不是这个 .down
如果是的话呢
我们再去
执行原来这个逻辑
把这块拿到这里边
我们先试一下哈
不行这块忘了把它换成target
好大家看可以了
那他现在删除是有问题的
为什么呢
因为这个放到了这个里面
他这个
this就不对了
所以呢我们还是把它给他接收过来
然后呢我们用target children .menu
我们试一下行不行
哎可以了
好但是呢注意看有个问题
我们把它挪进去，大家看它会闪
这是为什么呢
原因是啊 我们用了mouse out
我们把它呀换成mouse leave试试
大概不闪了对吧
但是呢他移除的时候会移除不掉
我们先不管
先看leave和out有什么区别 大家看
他说
当指针离开元素以及他所有的后代时
才会触发leave
那OUT呢他是说
当指针离开元素或离开元素的后代
就会触发OUT
那意味着什么呢
我们来看这个层级结构哈
他现在啊
注意看这个弹框
是放在这个档的子元素里
所以当我们移到这个弹框的时候
实际上如果你用的是OUT的话
他就会认为我们已经离开这个.down了
所以就会触发这个事件
所以我们改成leave就没有问题了
那为什么现在没有隐藏掉呢
我们把这个target打印一下
看他每次的target都是什么
清空一下
好
他的他给他现在是 menu-top
也就是这个"删除事件“
如果从下边移除呢
就是下边这个
所以啊他就删不掉
那我如果从里边离开呢
他是li 所以
LI的children
children是代表它只（往下）找1级
所以我们把它改成find
它能解决LI的问题
同时呢我们再加一个
parent
也就是说
这个是处理“从li移出的那种情况”
这个是处理
“从里边的子菜单移出的情况”
我们再来试一下
好这回都能移除了
但是还有一种情况大家看
这种就是我在这里边互相移动的时候
他还没有移除掉
原因是啊这里边他都没有触发这个
猎物事件
那怎么办呢
我们可以直接
把这个menu在
在这做一个隐藏
.stop.hide()
好我们再来试一下
大家看 这就可以了
然后呢把它删一下
再看他就还有这个事件