父元素onmouseover触发事件在父子元素间移动不停触发的问题

今天写了一个侧边栏动态展开收缩的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center}.container{height: 347px;position: absolute;right: 0;border: 1px solid black}.container li{position: relative;list-style: decimal;height: 30px;width: 200px;margin-bottom: 3px;border: 1px solid black;display: list-item;right: -165px}.container li::before{content: "";display: block;position: relative;height: 30px;width: 35px;background: red}@keyframes bance {0%{right: -165px}100%{right:0 }}@keyframes bance1 {0%{right:0 }100%{right:-165px}}</style>
</head>
<body><div class="container"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></div><script>window.onload=function(){var lilist=document.querySelectorAll('li');var container=document.querySelector('.container');var T1=null,T2=null;container.onmouseover=function(){var n=0;T1=setInterval(function(){lilist[n].style.animationName='bance';lilist[n].style.animationDuration='0.5s';lilist[n].style.animationFillMode="forwards";n++;if(n>9){clearInterval(T1)}},50)};container.onmouseout=function(){var i=0;T2=setInterval(function(){lilist[i].style.animationName='bance1';lilist[i].style.animationDuration='0.5s';lilist[i].style.animationFillMode="forwards";i++;if(i>9){clearInterval(T2)}},100)}}</script>
</body>
</html>

执行过程中不断报错，仔细检查逻辑没有发现什么问题，百度之发现可能是父元素onmouseover触发事件在父子元素间移动不停触发的问题，着手解决吧。读完http://blog.sina.com.cn/s/blog_7488043d0101dnuz.html 这篇文章后知道了解决方法；

在onmouseover时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。

添加判断后如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center}.container{height: 347px;position: absolute;right: 0;border: 1px solid black}.container li{position: relative;list-style: decimal;height: 30px;width: 200px;margin-bottom: 3px;border: 1px solid black;display: list-item;right: -165px}.container li::before{content: "";display: block;position: relative;height: 30px;width: 35px;background: red}@keyframes bance {0%{right: -165px}100%{right:0 }}@keyframes bance1 {0%{right:0 }100%{right:-165px}}</style>
</head>
<body><div class="container"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></div><script>window.onload=function(){var lilist=document.querySelectorAll('li');var container=document.querySelector('.container');var T1=null,T2=null;container.onmouseover=function(){if(!this.contains(event.fromElement)){var n=0;T1=setInterval(function(){lilist[n].style.animationName='bance';lilist[n].style.animationDuration='0.5s';lilist[n].style.animationFillMode="forwards";n++;if(n>9){clearInterval(T1)}},50)}};container.onmouseout=function(){if(!this.contains(event.toElement)){var i=0;T2=setInterval(function(){lilist[i].style.animationName='bance1';lilist[i].style.animationDuration='0.5s';lilist[i].style.animationFillMode="forwards";i++;if(i>9){clearInterval(T2)}},100)}};}</script>
</body>
</html>

没有问题。。

转载于:https://www.cnblogs.com/xueandsi/p/5953123.html

父元素onmouseover触发事件在父子元素间移动不停触发的问题相关推荐

JS event.target 返回触发事件的当前元素
定义和用法: target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. <script type="text/javascript"&g ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
触发事件_黑暗的三天之触发事件
作者:Elizabeth Marie 翻译:地狱天堂你决定我非常犹豫来释放这些信息,因为现在,在网络上,有如此多关于黑暗的三天的信息.但是,我也一直在领受关于这个事件的信息,因此,我会忠实,并分享它 ...
css隐藏元素触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是？...
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
vue让元素固定_vue 监听dom元素的滚动事件实现某元素吸顶或者固定位置显示
孤单的是人,寂寞的是心. 这只是我写的一个简单的demo,但是所需数据与逻辑已走通, 拿走就能用的那种,希望你能看完区域价格房型更多更多更多更多更多更多更多更多更多更多更多 ...
html下拉条触发事件,css 滚动条滑动到底部时触发事件
div: 当滚动的距离+div的高度 == 文档的高度时,则滚动条以滑动到底部. $(document).ready(function (){ var nScrollHight = 0; //滚动距 ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...
js 捕获子元素的 focus 事件
focus 事件可以绑定任何元素,但只有可编辑元素才可以触发 focus 事件.且 focus 事件不会冒泡. 所以不能在父元素监听子元素的 focus 事件. focusin 事件与 focus 一 ...

父元素onmouseover触发事件在父子元素间移动不停触发的问题

父元素onmouseover触发事件在父子元素间移动不停触发的问题相关推荐

最新文章

热门文章