首页 新闻 会员 周边 捐助

JS:子节点 onmouseover 触发了 父节点的 onmouseout,怎么解决?

0
悬赏园豆:20 [已解决问题] 解决于 2012-01-03 10:46

子节点 onmouseover 触发了 父节点的 onmouseout,怎么解决?

 

同时发现 子节点的 onmouseout 也会触发父节点的 onmouseout

fun5的主页 fun5 | 初学一级 | 园豆:4
提问于:2011-09-13 15:16
< >
分享
最佳答案
0

如果你引用了jQuery框架

event.stopPropagation() 这个就可以了

用法如下:

$('#element').click(function(evenet)

{

  // 执行逻辑

      e.stopPropagation(); //这样就能取消事件的冒泡了

})

 

如果用的原生的javascript,那就需要写js的兼容了

非ie浏览器

e.stopPropagation();

 

ie浏览器
window.event.cancelBubble = true;

收获园豆:20
fade-away | 菜鸟二级 |园豆:255 | 2011-09-13 16:53

依然不行啊

<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>
fun5 | 园豆:4 (初学一级) | 2011-09-13 16:57

@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找到了,只需判断他是不是绑定事件元素的子元素就可以了,如果是就不执行后面的事件 否则就执行

fade-away | 园豆:255 (菜鸟二级) | 2011-09-20 10:01
其他回答(3)
0

js 的事件冒泡;可以参考 http://www.blueidea.com/tech/web/2007/4628.asp 处理

Devin Mao | 园豆:596 (小虾三级) | 2011-09-13 16:13
0

return false

调调儿 | 园豆:155 (初学一级) | 2011-09-14 13:06
0

这个应该就是你代码写的有问题了吧。。。代码的设计有问题

呦菜 | 园豆:2 (初学一级) | 2011-10-10 17:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册