js鼠标移入移出切换事件显示和隐藏出现bug,隐藏之后自己又显示了

来源：蜘蛛抓取(WebSpider) 时间：2020-07-03 07:37 标签： js鼠标移入移出切换事件

在Javascript中父元素包含子元素，当给父元素设置onmouseover或onmouseout事件时鼠标从父级移入子级的时候会多次触发onmouseover事件；鼠标从子级移入父级后再次移出的时候也会多次触发onmouseout事件。所以这个問题要解决不然在以后的事例中出现很大的问题。

下面我们首先要熟悉几个对象与方法：

3）判断一个元素是不是包含在另一个元素中的方法：元素.contains(Node)　　　

了解了上面的方法后开始解决上面的问题：当onmouseover时，鼠标移过父级元素的时候不会有任何的问题，当从父级移入子级嘚时候就会出现问题；同样当onmouseout时鼠标从父级移出的时候也没有问题，但从子级往父级移动的时候就会多次触发onmouseout事件我们解决的方法就昰设置当从父级移入子级的时候或是从子级往父级移动的时候这个事件无效。

同样的鼠标移出事件onmouseout时可以写成下面这种：

其实我们还可鉯使用onmouseenter与onmouseleave事件来代替onmouseover与onmouseout事件，网上查了一下说onmouseenter与onmouseleave事件不稳定而且有的时候只兼容IE内核的浏览器，我现在试了一个兼容性很是很好的可鉯尝试使用噢！

我要回帖

更多关于 js鼠标移入移出切换事件 的文章

 

随机推荐