JS:子节点 onmouseover 触发了 父节点的 onmouseout,怎么解决？
0
悬赏园豆：20
[已解决问题]
解决于 2012-01-03 10:46
子节点 onmouseover 触发了 父节点的 onmouseout,怎么解决？
同时发现 子节点的 onmouseout 也会触发父节点的 onmouseout
最佳答案
0
如果你引用了jQuery框架
event.stopPropagation() 这个就可以了
用法如下：
$('#element').click(function(evenet)
{
// 执行逻辑
e.stopPropagation(); //这样就能取消事件的冒泡了
})
如果用的原生的javascript，那就需要写js的兼容了
非ie浏览器
e.stopPropagation();
ie浏览器
window.event.cancelBubble = true;
收获园豆：20
依然不行啊
<html>
<head>
<title>标题</title>
</head>
<body>
<div id="panel">xx</div>
<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>
</body>
</html>
<script>
function $(_id){ return document.getElementById(_id)}
var _p=$("div");
var _c=$("div_div");
var _pl=$("panel");
var isOnC=false;
_p.onmouseover=function(e){}
_p.onmouseout=function(e){
alert('鼠标离开')
}
_c.onmouseover=function(e){
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble =true;
isOnC=true;
}
_c.onmouseout=function(e){
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble =true;
isOnC=false;
}
</script>
<head>
<title>标题</title>
</head>
<body>
<div id="panel">xx</div>
<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>
</body>
</html>
<script>
function $(_id){ return document.getElementById(_id)}
var _p=$("div");
var _c=$("div_div");
var _pl=$("panel");
var isOnC=false;
_p.onmouseover=function(e){}
_p.onmouseout=function(e){
alert('鼠标离开')
}
_c.onmouseover=function(e){
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble =true;
isOnC=true;
}
_c.onmouseout=function(e){
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble =true;
isOnC=false;
}
</script>
@foxidea:
看了你的代码，在ie 6和firefox测试了下，
1.e.stopPropagation(); window.event.cancelBubble = true; 能够停止事件冒泡的 为什么要这样说了，请看第2点
2. 你上面所说的子节点 onmouseover 触发了 父节点的 onmouseout ，其实不然,你如果在子节点里alert一下的话，你会发现父节点的mouseout 事件是在子节点的mouseover之前。发现什么了没有！父节点的mouseout事件不是子节点的冒泡事件触发的，所以说这个事件的冒泡无关。
你可以参考下我的解决方案：
就是在父节点的事件里对mousetout将要进入的元素判断其是否属于该节点的子元素
var e=e||window.event; //获取事件
var obj=e.relatedTarget||e.toElement; //获取mouseout 进入元素
obj找到了，只需判断他是不是绑定事件元素的子元素就可以了，如果是就不执行后面的事件 否则就执行
其他回答(3)
0
0
return false
0
这个应该就是你代码写的有问题了吧。。。代码的设计有问题
