事件冒泡疑难问题求解答
[color=Red]先看一个demo，把鼠标放到两个方块的红色间隙上，也会激发父级容器的onmouseout 事件，而此时鼠标是在容器内部，还没有离开容器啊[/color][html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件冒泡疑难问题</title>
<style type="text/css">
.square {background-color:#0066FF; width:90px; height:90px; float:left;display:inline; cursor:pointer;}
#s2 {background-color:#009933; margin-left:6px;}
#outer {clear:both; overflow:hidden; zoom:1; background-color:#FF0000; width:186px;}
</style>
<script type="text/javascript">
function $(objId){
return document.getElementById(objId);
}
window.onload=function(){
$("outer").onmouseout=function(){
alert("激发outer的onmouseout事件");
}
}
</script>
</head>
<body>
<div id="outer">
<div id="s1" class="square"></div>
<div id="s2" class="square"></div>
</div>
</body>
</html>
[/html]
[color=Red]可能是事件冒泡问题，我在小方块上添加事件函数，取消冒泡，如下demo2，但是，鼠标移到红色间隙还是会激发父级容器的onmouseout 事件：[/color]
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件冒泡疑难问题</title>
<style type="text/css">
.square {background-color:#0066FF; width:90px; height:90px; float:left;display:inline; cursor:pointer;}
#s2 {background-color:#009933; margin-left:6px;}
#outer {clear:both; overflow:hidden; zoom:1; background-color:#FF0000; width:186px;}
</style>
<script type="text/javascript">
function $(objId){
return document.getElementById(objId);
}
window.onload=function(){
$("outer").onmouseout=function(){
alert("激发outer的onmouseout事件");
}
$("s1").onmouseout=function(event){
cancelBub(event);
}
$("s2").onmouseout=function(event){
cancelBub(event);
}
}
function cancelBub(oEvent){//取消事件冒泡函数
try{
oEvent.cancelBubble=true;
}catch(e){
oEvent.stopPropagation();
}
}
</script>
</head>
<body>
<div id="outer">
<div id="s1" class="square"></div>
<div id="s2" class="square"></div>
</div>
</body>
</html>
[/html]
[color=Red]请教大家，我想鼠标移到红色区域不激发 onmouseout 事件，鼠标移到空白无色的地方才激发，该怎么做呢？[/color]
[[i] 本帖最后由 nower 于 2008-8-29 14:04 编辑 [/i]] while 判断事件的第二目标是否为事件指向元素之外的元素 [quote]原帖由 [i]zbm2001z[/i] 于 2008-8-29 15:16 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4185442&ptid=2882572][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
while 判断事件的第二目标是否为事件指向元素之外的元素 [/quote]
谢谢，刚才搜到之前的一个帖子，采用了你的方法解决了问题，取消冒泡在这个模型里面似乎不起作用
[url]http://bbs.blueidea.com/viewthread.php?tid=2875959[/url]
页:
[1]