JS:子元素 onmouseover 触发了父元素的 onmouseout,子元素的onmouseout 同时也触发 父元素的 onmouseout

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS:子元素 onmouseover 触发了父元素的 onmouseout,子元素的onmouseout 同时也触发 父元素的 onmouseout相关的知识，希望对你有一定的参考价值。

JS:子元素 onmouseover 触发了父元素的 onmouseout,子元素的onmouseout 同时也触发 父元素的 onmouseout
<div style="height:128px; width:128px;border:1px solid #000" id="div">
<div style="height:24px; width:24px; border:1px solid #f00" id="div_div">
</div>
</div>

<script>
function $(_id) return document.getElementById(_id)
var _p=$("div");
var _c=$("div_div");
_p.onmouseover=function(e)

_p.onmouseout=function(e)
alert('鼠标离开')


_c.onmouseover=function(e)


_c.onmouseout=function(e)


</script>

参考技术A _p.onmouseover=function(e)
可以在这里同时写鼠标经过时_p和_c的状态，其它事件类似
 参考技术B 你这个是典型的事件冒泡噢。你只需要在进入子层的时候阻止冒泡就好了

<html>
<head>
</head>
<body>
<div style="height:128px; width:128px;border:1px solid #000;padding:20px;" id="divs">
<div style="height:24px; width:24px; border:1px solid #000;background:#fff" id="div_div">
</div>
</div>

<script>
function $(_id) return document.getElementById(_id)
var _p=$("divs");
var _c=$("div_div");
_p.onmouseover=function(e)


_p.onmouseout=function(e)

alert("鼠标离开DIV")


_c.onmouseover=function(e)



_c.onmouseout=function(e)
if(e)
e.stopPropagation()
else
window.event.cancelBubble = true;


</script>
</body>
</html>追问

不行

 参考技术C 代码贴出来！

JS中onmouseover与onmouseout的bug

在Javascript中，父元素包含子元素，当给父元素设置onmouseover或onmouseout事件时，鼠标从父级移入子级的时候会多次触发onmouseover事件；鼠标从子级移入父级后再次移出的时候也会多次触发onmouseout事件。所以这个问题要解决，不然在以后的事例中出现很大的问题。

下面我们首先要熟悉几个对象与方法：

1）事件对象：

2）事件对象相关属性(只针对onmouseover与onmouseout):

　　标签源：oEvent.fromElement(从哪里来的元素)：兼容IE,Chrome

　　　　　　oEvent.toElement(去哪里的元素)：兼容IE,Chrome

　　　　　　oEvent.relateTarget(相关元素)：兼容FF　

3）判断一个元素是不是包含在另一个元素中的方法：元素.contains(Node)　　　

了解了上面的方法后，开始解决上面的问题：当onmouseover时，鼠标移过父级元素的时候，不会有任何的问题，当从父级移入子级的时候就会出现问题；同样当onmouseout时，鼠标从父级移出的时候也没有问题，但从子级往父级移动的时候就会多次触发onmouseout事件，我们解决的方法就是设置当从父级移入子级的时候或是从子级往父级移动的时候这个事件无效。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onmouseover的bug</title>
<style>
div{ width:200px; height:200px; background:#ccc; margin:40px auto; }
h3{ height:30px; background:yellow; }
</style>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName(‘div‘)[0];
            oDiv.onmouseover=function(ev){
                var oEvent=ev||event;
                var oFrom=oEvent.fromElement||oEvent.relatedTarget;
                //其中oEvent.fromElement兼容IE，chrome
                //oEvent.relatedTarget;兼容FF。
                if(this.contains(oFrom)) return; //判断div是不是包含oFrom,如果包含就返回
                alert(‘移入了‘);
            };
    };
</script>
</head>

<body>
    <div>
        <h3></h3>
    </div>
</body>

 

同样的鼠标移出事件onmouseout时，可以写成下面这种：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onmouseout的bug</title>
<style>
div{ width:200px; height:200px; background:#ccc; margin:40px auto; }
h3{ height:30px; background:yellow; }
</style>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName(‘div‘)[0];
            oDiv.onmouseout=function(ev){
                var oEvent=ev||event;
                var oTo=oEvent.toElement||oEvent.relatedTarget;
                //其中oEvent.toElement兼容IE，chrome
                //oEvent.relatedTarget;兼容FF。
                if(this.contains(oTo)) return; //判断div是不是包含oTo,如果包含就返回
                alert(‘移出了‘);
            };
    };
</script>
</head>

<body>
    <div>
        <h3></h3>
    </div>
</body>

其实我们还可以使用onmouseenter与onmouseleave事件来代替onmouseover与onmouseout事件，网上查了一下说onmouseenter与onmouseleave事件不稳定，而且有的时候只兼容IE内核的浏览器，我现在试了一个兼容性很是很好的，可以尝试使用噢！

 

　　　　　　　　

以上是关于JS:子元素 onmouseover 触发了父元素的 onmouseout,子元素的onmouseout 同时也触发 父元素的 onmouseout的主要内容，如果未能解决你的问题，请参考以下文章

JS中onmouseover与onmouseout的bug

子元素触发了父元素的onmouseout事件。怎么解决能让子元素不触发

Onmouseover被调用多次

Jquery mouseover多次触发问题

js技术

当元素被禁用时触发 onmouseover 事件