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

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. RichEdit 追加 RTF

    下面实现追加RTF 到 RichEdit 的功能其本质是:EM_STREAMIN 消息,详细查看 MSDN//--------------------------------------------- ...

  2. linux默认网关的设置

    linux装系统设IP,这应该是系统管理员的基本功,可是不同的网络结构有不同的ip设法,您知道吗? 1.一块网卡的情况   这个没啥好说的,估计地球人都知道:address,netmask,gatew ...

  3. oracle 的 nubmer 类型与 C# 的 float double decimal 对应关系

    如果先有oracle 数据的情况下,怎么对应到C#中的类型. 在oralce 中 在dba_tab_columns表中, Data_type表示字段类型:Data_length表示字段类型的长度:Da ...

  4. 自用debug单元

    将之前的内存查看单元小幅修改,加上文件操作和计时,组成了一个自用debug单元,使用方法如示例. 此单元便捷之处在于直接将#define DEBUG注释掉而无需改动源码,即可取消debug模式. #d ...

  5. mybatis组合模糊+分页查询

    //组合模糊查询就是这么简单 <select id="findAllJiemu" parameterType="java.util.Map" result ...

  6. 第三方登录 QQ 错误码100044（提示 该应用非官方正版应用）

    当你碰到这个问题的时候,不要着急,你的功能已经走通了,代码没有问题. 100044 原因: 1.首先确定你的包名和签名,跟申请第三方平台的是一个.(真心吐槽一下,接盘侠不好当,尤其是没有交接的) 2. ...

  7. 利用googleapis在日文系统中改善中文字

    加入以下两句 1. <head> <link rel="stylesheet" href="http://fonts.googleapis.com/ea ...

  8. 关于android帮助文档打开慢

    打开慢的原因是:Doc目录下的html文件里含有访问google的js文件<link rel="stylesheet"href="http://fonts.goog ...

  9. ios 关于状态栏的一些小知识

    一.改变状态栏颜色 状态栏分为两种颜色,默认的是黑色,这里想要改为白色: 分为两步: 第一步:在项目中找到plist文件,添加View controller-based status bar appe ...

  10. 使用OPENROWSET、Microsoft.ACE.OLEDB实现大数据量的高效导入

    首先说明使用的环境是:java和Sqlserver. 最近公司需要进行大数据量的导入操作.原来使用的是Apache POI,虽然可以实现功能,但是因为逻辑处理中需要进行许多校验,处理速度太慢,使用多线 ...