在mouseout与mouseover的冒泡问题上，相信有很多朋友都遇到过。今天这里就总结一下

关于mouseover和mouseout冒泡问题的解决方案：

首先，看下event.relatedTarget的用法。

relatedTarget

事件属性返回与事件的目标节点相关的节点。

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

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用。

<div id='but_temp'><a href='#'>

这里是文字

</a>   

    <div>

第二方收复失地还

 <br>sdfsjdlfsdjlfksdjlfksjdflk   

    <br>   

    <div>

第三层第三层第三层第三层第三层第三层

<br>   

第三层第三层第三层第三层第三层第三层第三层

</div>   

    <br>   

    </div>   

</div>
 var d1 = document.getElementById('but_temp');   

        d1.onmouseover = mouseover_x    

        d1.onmouseout = mouseout_x    

        function mouseover_x ( ae ){   

            var e = window.event || ae    

            var s = e.fromElement || e.relatedTarget    

            if( document.all ){   

                if(  !(s == this || this.contains(s))  ){   

                    alert("IE: 你in 了！");   

                }   

            }else{   

                var res= this.compareDocumentPosition(s)       

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

                    alert("FF: 你in 了 ！");   

                }   

            }   

        }   

        function mouseout_x( ae ){

            var e = window.event || ae;   

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

            //var temp = document.getElementById('but_temp');      

            if(document.all){      

                if( !this.contains(s) ){      

                    alert('IE: 你out 了');      

                }      

            }else{      

                var res= this.compareDocumentPosition(s)         

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

                    alert('FF: 你out 了');      

                }        

            }     

        }

今天发现JQ中关于这个问题,已经有了一个好的解决办法了.呵呵,jquery中定义了一种事件叫做"mouseleave",用这个事件做事件句柄的话,就可以解决这个问题了.越来越发现jquery是个好东西了. 方案三:

<!DOCTYPE html>

<html>

<head>

    <title>无标题页</title>

    <script type="text/javascript" src="http://sy.zgsapt.com/js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#numd").bind("mouseleave", function() {

                document.getElementById('keybored').style.display = 'none';

                document.getElementById('Nm').blur();

            });

            $("#Nm").focus(function() {

                document.getElementById('keybored').style.display = '';

            });

        });

    </script>

</head>

<body>

    <ul>

        <li>

            <input />

            <div>

            </div>

        </li>

    </ul>

    <input id="hid" type="text" value="" style="display: none" />

    <span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">

        <input type="text" id="Nm" name="Nm" value="" />

        <div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"

            id="keybored">

            <input type="button" value="1" onclick="document.getElementById('Nm').value+=this.value;" />

        </div>

    </span>

</body>

</html>

实现这种效果很简单了

onmouseout,mouseover经过子元素也触发的问题解决方案的更多相关文章

  1. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  2. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  3. 父容器利用opacity设置透明后，子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  4. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

  5. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  6. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  7. 给div设置background-color: rgba(0, 0, 0, 0.2)属性，并加了css3动画--opacity动画淡出动画，之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  8. 【原创】解决鼠标经过子元素触发mouseout，mouseover事件的问题

    关键词:父子元素关系  mouseout  mouseover  事件  事件冒泡 初期代码: <!DOCTYPE html> <html> <head> < ...

  9. 父级元素绑定定mouseout和mouseover，移过子元素是都会触发

    2019独角兽企业重金招聘Python工程师标准>>> mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标 ...

随机推荐

  1. sonarQube安装及本机扫描C#项目

    因项目需要,需要使用sonarQube对代码进行扫描并查看,因对sonarQube不熟悉,所以先在本机搭建测试环境. 参考了张老师的博客:http://www.cnblogs.com/danzhang ...

  2. ZOJ 3498 Javabeans

    脑筋急转弯. 如果是偶数个,那么第一步可以是$n/2+1$位置开始到$n$都减去$n/2$,后半段就和前半段一样了. 如果是奇数个,那么第一步可以是$(n+1)/2$位置开始到$n$都减去$(n+1) ...

  3. java原理—反射机制

    http://www.cnblogs.com/forlina/archive/2011/06/21/2085849.html 一.什么是反射:反射的概念是由Smith在1982年首次提出的,主要是指程 ...

  4. 洛谷P4609 [FJOI2016]建筑师（第一类斯特林数+组合数）

    题面 洛谷 题解 (图片来源于网络,侵删) 以最高的柱子\(n\)为分界线,我们将左边的一个柱子和它右边的省略号看作一个圆排列,右边的一个柱子和它左边的省略号看作一个圆排列,于是,除了中间的最高的柱子 ...

  5. 51nod 1052 （dp）

    最大M子段和 N个整数组成的序列a[1],a[2],a[3],…,a[n],将这N个数划分为互不相交的M个子段,并且这M个子段的和是最大的.如果M >= N个数中正数的个数,那么输出所有正数的和 ...

  6. Codeforces Round #119 (Div. 2) Cut Ribbon（DP）

    Cut Ribbon time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  7. Java中Object的方法

    构造方法摘要Object()           方法摘要protected Object clone()           创建并返回此对象的一个副本.boolean equals(Object ...

  8. 【BZOJ 4513】【SDOI 2016】储能表

    http://www.lydsy.com/JudgeOnline/problem.php?id=4513 设\(f(i,0/1,0/1,0/1)\)和\(g(i,0/1,0/1,0/1)\)分别表示d ...

  9. 【计算几何】【分类讨论】Gym - 101243I - Land Division

    题意:给你一个n个点的凸包,让你切一刀,使得它变成一个m边形和一个K边形,问你切的这一刀最短是多少. 如果m+K==n+4,那么一定切在两条边上,但是由于两个线段间的最短距离,至少会经过一条线段的一个 ...

  10. 【思路】Gym - 101173F - Free Figurines

    套娃形成一些链形结构,给你套娃的初始状态和目标状态,问你需要几步(将最外层套娃打开,以及将一整套套娃塞进一个空套娃都算一步)才能达到. 容易发现,只有每条链链尾的匹配段可以不拆,其他的都得拆开. #i ...