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

<!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触发事件在父子元素间移动不停触发的问题的更多相关文章

  1. target属性用于返回最初触发事件的DOM元素。

    target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...

  2. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  3. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

  4. js实现文本框或文本域在用户输入时（oninput）触发事件，操作元素

    写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...

  5. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  6. jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)

    $("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...

  7. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  8. js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

    js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素. ...

  9. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

随机推荐

  1. 【译】 AWK教程指南 3计算并打印文件中指定的字段数据

    awk 处理数据时,它会自动从数据文件中一次读取一条记录,并会将该记录切分成一个个的字段:程序中可使用 $1, $2,... 直接取得各个字段的内容.这个特色让使用者易于用 awk 编写 reform ...

  2. python 调试

    python 调试基本和gdb调试一样,举例: debug .py #!/usr/bin/python   print "hello" i=0 for j in range(10) ...

  3. SQL Server 用表中已有数据造数据

    从表中选择数据再插入到表中(select XXX into 与insert into XXX select的结合) 在做性能测试时需要大量的业务数据.完全从画面造数据比较费时间,使用SQL文批量插入数 ...

  4. HDU-4639 Hehe 简单DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4639 简单递推题,呵呵,不多说... //STATUS:C++_AC_15MS_272KB #incl ...

  5. 13个不容错过的Java项目

    今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自有代码或者学习编程技能.无论如何,开发工作当中我们几乎 ...

  6. Java Spring 中你不知道的注入方式

    前言 在Spring配置文件中使用XML文件进行配置,实际上是让Spring执行了相应的代码,例如: 使用<bean>元素,实际上是让Spring执行无参或有参构造器 使用<prop ...

  7. 设置Windows 远程协助与远程桌面

    家庭局域网组建完成后,即可通过远程协助解决各种问题,或联机玩游戏等. 使用Windows 7\8\10 远程协助与远程桌面 Windows 8系统中自带了远程协助功能,家庭用户只需要做简单的设置,就可 ...

  8. 笔记-iOS弹幕(源码)实现原理解析

    最近,读完今年的第三本书<大话移动APP测试 Android与iOS>,在读到陈晔前辈改变中国测试行业的决心时,内心无比激动,作为一名初生的开发人员,我可能还无法理解测试行业的本质,但他那 ...

  9. STM32 SysTick定时器应用【worldsing笔记】

    SysTick是CM内核独立的定时器,时钟可以用内核内部的,也可以用芯片厂家(ST)的时钟,参考<Cortex-M3权威指南>的第13章: 另外也可以考<STM32F10xxx Co ...

  10. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...