JS子元素oumouseover触发父元素onmouseout

时间：2021-03-26 08:54:41

原文:JS子元素oumouseover触发父元素onmouseout

　　JavaScript中，父元素包含子元素：
　　当父级设置onmouseover及onmouseout时，鼠标从父级移入子级，则触发父级的onmouseout后又触发onmouseover；从子级移入父级后再次触发父级的oumouseout后又触发onmouseover。而如果onmouseover内又应用了计时器便会存在较大的问题。下面针对此问题给出解决方案。
　　首先，在给出解决方案之前，必须先弄清楚几个对象及方法，分别如下：
　　1、事件对象
　　2、事件对象相关属性（只针对onmouseover及onmouseout），即fromElement、toElement、relatedTarget
　　3、判断一个元素是否包含另一个元素的方法，即element.contains(Node)与element.compareDocumentPosition(Node)

　　既然前面已经说了要弄清如上几个对象及方法，那么，我们就可以分析一下倒底如何去解决这个问题。
分析：
　　存在的问题是设置onmouseover时，鼠标从移入父级内时，没任何问题，但由父级移入子级时，以及由子级称出到父级时会出现如上问题，那么我们可以想办法设置当鼠标从父级移入到子级时，或从子级移出到父级时让触发对象失效，我们可以通过if语句进行判断。而事件对象里面有个属性可以获取移入移出时的相关对象，下面就来介绍。

　　1、事件对象：可以获取事件对象的一系列属性，在事件中写一个参数，即可通过参数获取，方法如下：

 wrap.onmouseover = function(e) {

     e = window.event || e;        // window.event是为了兼容ie下获取事件对象，而e为标准浏览器直接获取

 }

　　2、事件对象的相关对象
在触发onmouseover及onmouseout时，必定会涉及到其它对象，如：onmouseover的相关对象，即为哪个对象进入的。onmouseout的相关对象即为进入到哪个对象。获取方法如下：

 wrap.onmouseover = function(e) {

     e = window.event || e;

     var s = e.fromElement || e.relatedTarget;    //e.fromElement为IE下onmouseover获取相关对象方法，relatedTarget为标准浏览器下获取方法

 }

 wrap.onmouseout = function(e) {

     e = window.event || e;

     var s = e.toElement || e.relatedTarget;        //e.toElementIE下onmouseout获取相关对象方法，relatedTarget为标准浏览器下获取方法

 }

　　3、判断一个元素是否包含另一个元素
IE下可以使用a.contains(b)判断a是否包含b
标准浏览器下a.compareDocumentPosition(b)有5个值，若为0表示为同一节点，若为2表示a位于b后面，若为4表示a位于b前面，若为10表示a为b的后代，若为20表示a为b的祖级。

　　先上个即将用到的示例的HTML及CSS

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

     html,body,div{margin:0;padding:0}

         .wrapper {

             overflow: hidden;

             width: 800px;

             background: black;

         }

         .box {

             height: 200px;

             background: #FF0;

             margin: 80px 0;

         }

     </style>

 </head>

 <body>

     <div class="wrapper" id="wrap">

         <div class="box" id="box"></div>

     </div>

 </body>

 </html>

　　既然知道了以上的获取属性及事件的必备方法，那么我们就可以想方法解决问题了
当触发onmouseover时，可能是从对象以外移入的，也有可能是父级移入到子级，以及子级移出到父级，刚才也说过，onmouseover的相关对象是获取从哪个对象进入的。如果是从外面的对象进入的，我们就执行所需的代码。如果是从父级移入到子级或是由子级移出到父级时，则直接跳过。
父级移入到子级对象，相关对象为父级。 子级移出到父级对象，相对对象为子级。
代码如下：

 wrap.onmouseover = function(e) {

     e = window.event || e;

     var s = e.fromElement || e.relatedTarget;

     if (document.all) {    //判断浏览器是否为IE,如果存在document.all则为IE

         if (!this.contains(s)) {    // 判断调用onmouseover的对象(this)是否包含自身或子级，如果包含，则不执行

             console.log('IE will over');

         }

     } else {    //标准浏览器下的方法

         var reg = this.compareDocumentPosition(s);

         if (!(reg == 20 || reg == 0)) {

             console.log('Browser will over');

         }

     }

 }

　　当触发onmouseout时，可能是从父级移到子级，也可能由子级移到父级，或是移出至父级之外。
父级称到子级，则相关对象为子级，子级称到父级，则相关对象为父级。
代码如下：

 wrap.onmouseout = function(e) {

     e = window.event || e;

     var s = e.toElement || e.relatedTarget;

     if(document.all) {

         if (!this.contains(s)) {

             console.log('IE will out');

         }

     } else {

         var reg = this.compareDocumentPosition(s);

         if (!(reg == 20 || reg == 0)) {

             console.log('Browser will out');

         }

     }

 }

问题也就得到了解决。

不过你会发现：onmouseover与onmouseout的判断方法其实是一样的。于是我们得到：
无论是移入还是移出，只要相关对象是父级以外的就可以执行，否则代码不执行。

最后，再为大家提供本人自己写的兼容代码，复制到JS代码后可直接调用。代码如下：

 /*

  * 功能：鼠标移入对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的触发onmouseover的bug

  * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的事件对象，第三个对象表示要执行的函数

  * 作者：http://www.cnblogs.com/wuyuchang/

  */

 function mouseover(a, e, func) {

     e = e || window.event;

     var b = e.fromElement || e.relatedTarget;

     mouseoverAndOut(a, b, func);

 }

 /*

  * 功能：鼠标移出对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseout的bug

  * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的事件对象，第三个对象表示要执行的函数

  * 作者：http://www.cnblogs.com/wuyuchang/

  */

 function mouseout(a ,e, func) {

     e = e || window.event;

     var b = e.toElement || e.relatedTarget;

     mouseoverAndOut(a, b, func);

 }

 /*

  * 功能：鼠标移入或移出对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseover & onmouseout的bug

  * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的事件对象，第三个对象表示要执行的函数

  * 作者：http://www.cnblogs.com/wuyuchang/

  */

 function mouseoverOrOut(a, e, func) {

     e = e || window.event;

     var b;

     if (e.type == 'mouseover') {

         b = e.fromElement || e.relatedTarget;

     } else if (e.type == 'mouseout') {

         b = e.toElement || e.relatedTarget;

     }

     mouseoverAndOut(a, e, func);

 }

 /*

  * 功能：鼠标移入或移出对象触发事件，兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseover & onmouseout的bug

  * 参数：第一个参数表示触发的对象，第二个参数表示触发的对象的相关对象，第三个对象表示要执行的函数

  * 作者：http://www.cnblogs.com/wuyuchang/

  */

 function mouseoverAndOut(a, b, func) {

     if (document.all) {

         if (!(a.contains(b))) {

             func();

         }

     } else {

         var res = a.compareDocumentPosition(b);

         if(!(res == 20 || res == 0)){

                 func();

             }

     }

 }

（如果是onmouseover，调用mouseover(a, e, func)即可；如果是onmouseout，调用mouseout(a, e, func)即可；或不管onmouseover还是onmouseout直接调用mouseoverOrOut(a, e, func)即可。）

以上为个人经验之谈，如有不到之处还请留言指点。

JS子元素oumouseover触发父元素onmouseout的更多相关文章

  1. 【转载】设置event&period;cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  2. 二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  3. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  4. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  5. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  6. jquery&colon;iframe里面的元素怎样触发父窗口元素的事件？

    例如父窗口定义了一个事件. top: $(dom1).bind('topEvent', function(){}); 那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗? $(dom1, ...

  7. ie6下子元素撑大父元素

    今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...

  8. pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为

    pointer-events的css属性.使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为,比如当一个元素盖住了某个点击事件时可用. 现在Firefox3.6+/Safari4+/Ch ...

  9. parent&lpar;&lbrack;expr&rsqb;&rpar; 取得一个包含着所有匹配元素的唯一父元素的元素集合。

    parent([expr]) 概述 取得一个包含着所有匹配元素的唯一父元素的元素集合.大理石构件 你可以使用可选的表达式来筛选. 参数 exprStringV1.0 用来筛选的表达式 示例 描述: 查 ...

随机推荐

  1. Qt 设置应用程序图标

    Qt4设置应用程序图标 将一个ico图标放在资源文件夹下; 然后建立txt,输入 IDI_ICON1 DISCARABLE "myico.ico"; 保存文件,将其后缀改为.rc; ...

  2. volatile 用法

    volatile 影响编译器编译的结果,指出,volatile 变量是随时可能发生变化的,与volatile变量有关的运算,不要进行编译优化,以免出错,(VC++ 在产生release版可执行码时会进 ...

  3. 用VNC远程图形化连接Linux桌面的配置方法

    首先下载到vnc的linux版本和windows版本. 1. 首先,我们要先下载 VNC 安装,假如我们下载的目录是 VNC/vncgo . # cd ~# wget http://www.realv ...

  4. docker的一些常用命令整理

    docker清除命令: 杀掉所有容器:docker kill $(docker ps -q) ; 清除所有容器:docker rm $(docker ps -a -q) ; 清除所有镜像:docker ...

  5. 【2016&period;3&period;16】作业 VS2015安装&amp&semi;单元测试（1）

    首先说下本机配置. CPU:Intel Atom x5-z8300 @1.44GHz 内存:2GB 操作系统:Windows10 家庭版 32位 硬盘:32GB 然后开始怒装visual studio ...

  6. 1&period;3&period;6、CDH 搭建Hadoop在安装之前&lpar;端口---DistCp使用的端口&rpar;

    DistCp使用的端口 列出的所有端口都是TCP. 在下表中,每个端口的“ 访问要求”列通常是“内部”或“外部”.在此上下文中,“内部”表示端口仅用于组件之间的通信; “外部”表示该端口可用于内部或外 ...

  7. BZOJ5473&colon; 仙人掌

    传送门 首先,所有连通块的个数的期望再减去每个点孤立的概率就是答案. 设 \(d_i\) 表示 \(i\) 的度数,那么每个点孤立的概率为 \(\frac{1}{2^{d_i}}\) 考虑计算所有连通 ...

  8. ural1469

    题解: 从左往右加入每一个点 判断一下和,pre,nxt是否相交 删除得时候也要判断 代码: #pragma GCC optimize(2) #include<cstdio> #inclu ...

  9. NABCD&lpar;网上投票系统&rpar;

    网上投票系统 N(need) 投票这件事情,在所有事情上都可能用得到,在互联网的影响下,投票的范围变得越来越广,比如在商业的里,往往要做市场分析,那么在互联网这个大的前提下,用网上投票系统来获取用户的 ...

  10. PHP生成UTF-8编码的CSV文件用Excel打开乱码的解决办法

    什么是BOM? 在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符,它的编码是FEFF.而FFFE在UCS中是不存在的字符,所以不应该出现在实际传输中.UCS规范建 ...

相关文章