一、我们先分析其产生的原因：

1、当鼠标从父级移入子集时触发了父级的两个事件：a、父级的mouseout事件（父级离开到子集）；b、由于事件冒泡影响，又触发了父级的mouseover事件（父级移入父级）；

2、当鼠标从子集移出到父级时又触发了父级的两个事件：a、由于事件冒泡影响，父级触发了mouseout事件（父级移出父级）；b、再触发了父级的mouseover事件（子集移入父级）

注：红色字体的解释是事件冒泡的奇妙之处。

二、解决方法：

首先必须先熟悉以下两个方法和一个事件属性：

a，b为节点

1、a.contains(b)

如果a包含b，返回true；否则返回false；a包含a同样返回true（不兼容火狐）

2、 a.compareDocumentPosition(b) 兼容火狐

这玩意就好玩了：

a在b之后返回2；

a在b之前返回4；

a被b包含返回8；

a包含b返回16；

a包含a返回0；

3、ev.relatedTarget

返回事件的目标节点相关的节点;

对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。（IE9以下不兼容）

但IE7/8下有ev.toElement和ev.fromElement;

mouseover事件对应ev.fromElement

mouseout事件对应ev.toElement

接下来开始解决问题：

假设a是父级；b是与事件关联的节点：

解决原因1：

方法（1）a包含b返回true，a包含a返回true；

方法（2）a移出b（mouseout）返回4+16即返回20；a移入a（mouseover）返回0；

解决原因2：

方法（1）a包含a返回true，a包含b返回true

方法（2）a移出a返回0，b移入a返回4+16即返回20；

要让以上都不执行：

见代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>解决子集影响父级事件</title>

    <style type="text/css">

    body  { width: 100%; height: 100%; padding: 0; margin: 0;}

    #div1 { width: 200px; height: 200px; background: red; }

    #div2 { width: 100px; height: 100px; background: blue;position: absolute; top: 50px; left: 50px;}

    #txt { width: 800px; background: lime; color: red; height: 50px; line-height: 50px; font-size: 30px}

    </style>

    <script>

    window.onload=function(){

        var oTxt = document.getElementById('txt');

        var a = document.getElementById('div1');

        var b = document.getElementById('div2');

        alert(b)

        a.onmouseover=function(ev){

            var oEvent = ev || window.event;

            if(toAffect(a,oEvent,'mouseover')){

                oTxt.value += "移入"+" ";

            }

        }

        a.onmouseout=function(ev){

            var oEvent = ev || window.event;

            if(toAffect(a,oEvent,'mouseout')){

                oTxt.value += "移出"+" ";

            }

        }

    }

    function toAffect(obj1,ev,event){

        var obj2 = null;

        if(ev.relatedTarget){

            obj2 = ev.relatedTarget;

        }

        else{

            if(event == 'mouseover'){

                obj2 = ev.fromElement;

            }

            else if(event == 'mouseout'){

                obj2 = ev.toElement;

            }

        }

        if(obj1.contains){

            return !obj1.contains(obj2);

        }

        else{

            return !!(obj1.compareDocumentPosition(obj2)-20)&&a!=b;

        }

    }

    </script>

</head>

<body>

    <div id="div1">

        父级

        <div id="div2">子集</div>

    </div>

    <input id="txt" type="text" />

</body>

</html>

代码中的toAffect方法便是解决子集影响父级的方法。

javascript父级鼠标移入移出事件中的子集影响父级的处理方法的更多相关文章

  1. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  2. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  3. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  4. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  5. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  6. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  7. vue 鼠标移入移出事件执行多次(尤其ie)

    来自:https://www.cnblogs.com/myfirstboke/p/9150809.html  侵删 <p @mouseover="over($event)" ...

  8. 为EasyUI的dataGrid单元格增加鼠标移入移出事件

    onLoadSuccess: function (data) { $(".datagrid-row").mouseover(function (e) { var text = $( ...

  9. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

随机推荐

  1. HP_UX系统批量创建LV或raw设备的Shell 脚本

    mkdir /dev/yjfsvg02 #创建lvm v2.0的VG,PE Size=64MB,不需要执行mknod创建group文件了.vgcreate -V 2.0 -s 64 -S 10t /d ...

  2. 深入理解URL

    URI(Universal Resource Identifier)通常由三部分组成: ①访问资源的命名机制: ②存放资源的主机名: ③资源自身的名称,由路径表示. 如下面的URI:http://ww ...

  3. All About Python

    Part one: Learn the Basics Hello, World! print "Hello,World!" Variables and Types Python i ...

  4. Eclipse设置、调优、使用(转自)

    转自http://yuanzhifei89.iteye.com/blog/974082 eclipse调优 一般在不对eclipse进行相关设置的时候,使用eclipse总是会觉得启动好慢,用起来好卡 ...

  5. Flash Builder常见菊紧问题集锦

    FB的错误多多,不定什么时候就让你蛋碎,路遇操蛋问题集锦如下: 1.有次用Flash Builder 4.7,打开之后马上自动关闭,试了几次都这样,解决办法如下: 到C:\Documents and ...

  6. Servlet学习三——传输文件

    最先在考虑传输文件时,想通过java写一个文件上传案例,传给Servlet,Servlet再保存至数据库中,但苦于一直没找到实例,听说Flex有实际的例子,就直接用Flex例子来测试了.本文的顺序为: ...

  7. Linux-read命令

    转自:http://man.linuxde.net/read read命令 read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合. 该命令可以一次读取多个变量的值,变量和输入的 ...

  8. 走进异步编程的世界 - 开始接触 async/await

    [C#] 走进异步编程的世界 - 开始接触 async/await   走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 C# 5.0 引入的 async ...

  9. IPython, Notebook, NumPy, SciPy, matplotlib 和其它

    安装这些工具pip install ipython pip install notebookpip install numpypip install scipypip install matplotl ...

  10. spring mvc 第二天【注解实现springmvc Handler处理ajax简单请求 的配置】

    这里使用的是在前台发起ajax请求Handler,后台伪造数据响应给前台, 配置对应ajax请求的Handler信息如下 @Controller public class MyController { ...