父元素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>
没有问题。。
父元素onmouseover触发事件在父子元素间移动不停触发的问题的更多相关文章
- target属性用于返回最初触发事件的DOM元素。
target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)
js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...
- js实现文本框或文本域在用户输入时（oninput）触发事件，操作元素
写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...
- 触发bfc解决父子元素嵌套垂直方向margin塌陷问题
首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-colo ...
- jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)
$("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型. event.target 触发该事件的 DOM 元素. ...
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
随机推荐
- POJ 1067 取石子游戏
题意:有两堆个数分别为a和b的石子,两个人轮流取石子,一次可以取一堆中任意个数的石子,或者在两堆中取相同个数的石子,最先没有石子可以取的人输,你先取,赢为1输为0. 解法:威佐夫博弈.看完题先找规律, ...
- About Wisdom
All human wisdom is summed up in two words --- wait and hope.人类所有的智慧可以归结为两个词---等待和希望. —— Alexandre D ...
- 房租管理小软件（六）：通用功能包括时间，效验，MD5加密，XML 操作
1.时间相关 public static DateTime getNow() { MyFZDataContext dataContext = MyFZDataContext.getDataContex ...
- ios开发中，A valid provisioning profile for this executable was not found，的解决方法
手头上的一个ios项目在上架后,再进行时出现了以上的这个错误,这是上架后忘了对一些配置进行复原 我的项目解决方法是: 是上面的这一块出现了问题,图片上的配置是正常的情况,但是上架的时候对其进行了修改, ...
- 基于samba实现win7与linux之间共享文件_阳仔_新浪博客
基于samba实现win7与linux之间共享文件_阳仔_新浪博客 然后启动samba执行如下指令: /dev/init.d/smb start 至此完成全部配置.
- 解决Visual Studio 2013调试时 Web服务框架中出现了无法识别的错误 问题
此问题出现过很多次,点帮助,google, baidu 都没解决,后经过摸索解决,记录下来1.查找80port是否有被占用情况,需要查看skype[这东西不知道为什么为占用80], Reporting ...
- 设置Windows 远程协助与远程桌面
家庭局域网组建完成后,即可通过远程协助解决各种问题,或联机玩游戏等. 使用Windows 7\8\10 远程协助与远程桌面 Windows 8系统中自带了远程协助功能,家庭用户只需要做简单的设置,就可 ...
- Java之文件的随机访问和读写RandomAccessFile
package FileDemo; import java.io.IOException; import java.io.RandomAccessFile; public class RandomAc ...
- [iOS基础控件 - 6.2] LOL英雄列表 UITableView单项显示
A.需求 1.使用只有一个section的TableView来显示LOL 的英雄列表 2.内容包括标题.副标题.图标 3.使用plain样式 4.使用MVC模式 heros.plist 文件结 ...
- Android 开机默认横竖屏
做Android系统开发时,经常遇到机器开机默认横竖屏问题,现整理如下: 方法一:修改WindowManagerService.java 在这个类中修改int mRotation = 0;这个值即可. ...