onmouseout 冒泡事件流终止不了。急~！

<html>
<body>
<div id="cs" style="width:300px;height:300px;background:red;">
<div style="width:100px;height:100px;background:green;"></div>
</div>
</body>
</html>
<script>
var a
a=document.getElementById('cs')
a.onmouseout=function(evt){
cancelBubble(evt);
a.style.display='none';
}
function cancelBubble(e)
{
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
};
</script>
有为什么错大侠们快快指出。坐等！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

function   cancelBubble(e)
{
    e=e||window.event;
        if   (e.stopPropagation)   e.stopPropagation();
        else   e.cancelBubble   =   true;
};
参数为e||window.event  表示e或window.event  这句话是跨浏览器的写法  支持这两种方式的浏览器才能进入该方法
IE中该对象为window.event(window可省略)  而Firefox中该对象为e
<html>
<body>
<div id="cs" style="width:300px;height:300px;background:red;">
<div style="width:100px;height:100px;background:green;"></div>
</div>
</body>
</html>
<script>
var a,b,c
a=document.getElementById('cs')
a.onmouseout=function(evt){
cancelBubble(evt);
a.style.display='none';
}
function cancelBubble(e)
{
e=e||window.event;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
};
</script>完整代码
<html>
<body>
<div id="cs" style="width:300px;height:300px;background:red;">
<div style="width:100px;height:100px;background:green;"></div>
</div>
</body>
</html>
<script>
var a,b,c
a=document.getElementById('cs')
a.onmouseout=function(event){
e=e||window.event;
cancelTheBubble(e);
a.style.display='none';
}
function cancelTheBubble(e)
{if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
};
</script>
你用cancelBubble 做自定义函数名，不是把IE的cancelBubble 给覆盖了吗？换个名
还有就是event参数的处理，注意一下就好了
<html>
<body>
<div id="cs" style="width:300px;height:300px;background:red;">
<div style="width:100px;height:100px;background:green;"></div>
</div>
</body>
</html>
<script>
var a,b,c
a=document.getElementById('cs')
a.onmouseout=function(event){
e=event||window.event; \\这里我也改了   用 e=e||window.event;  FF说e on defined
cancel(e);
a.style.display='none';
}
function cancel(e)
{
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
};
</script> 改了还是不好使
<!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=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="cs" style="width:300px;height:300px;background:red;">
<div style="width:100px;height:100px;background:green;"></div><script>
var a,b,c;
a = document.getElementById('cs');
a.onmouseout = function(event) {
    e = event || window.event;
    cancelTheBubble(e);
    a.style.display = 'none';
}
function cancelTheBubble(e)
{
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
}
</script></body>
</html>
<html>
<body>
<div   id= "cs "   style= "width:300px;height:300px;background:red; ">
<div   style= "width:100px;height:100px;background:green; "> </div>
</div>
</body>
</html>
<script>
var   a
a=document.getElementById( 'cs ')
a.onmouseout=cancel(evt);
a.style.display= 'none ';
}
function   cancel(e)
{
        if   (e.stopPropagation)   e.stopPropagation();
        else   e.cancelBubble   =   true;
};
</script>
<html>
<body>
<div   id= "cs "   style= "width:300px;height:300px;background:red; ">
<div   style= "width:100px;height:100px;background:green; "> </div>
</div>
</body>
</html>
<script>
var   a
a=document.getElementById( 'cs ')
a.onmouseout=function()
{
return false;
}
a.style.display= 'none ';
} </script>   这个更通用
cancel(e);------>cancelXXXXBubble(e)
你怎么总喜欢用保留字啊
这个方法我在网上找的可以解决问题的：  function isMouseLeaveOrEnter(e, handler) {
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
    while (reltg && reltg != handler)
        reltg = reltg.parentNode;
    return (reltg != handler);
} onmouseover="if (isMouseLeaveOrEnter(event,this))cle()" onmouseout="if (isMouseLeaveOrEnter(event,this)) start()"
<html>
<body>
<div   id= "cs "   style= "width:300px;height:300px;background:red; ">
<div   style= "width:100px;height:100px;background:green; "> </div>
</div>
</body>
</html>
<script>
var   a
a=document.getElementById( 'cs ')
a.onmouseout=function()
{
    return false;
a.style.display= 'none';
}
</script>
你都 return false 了  他还能执行了么。晕。
这样呢？
<!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=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="cs" style="width:300px;height:300px;background:red;">
<div style="width:100px;height:100px;background:green;">123</div>
</div><script>
var a = document.getElementById('cs');
a.onmouseout = function () { a.style.display = 'none'; }
a.getElementsByTagName('div')[0].onmouseout = function() { cancelTheBubble(event); }function cancelTheBubble(e)
{
e = e || window.event;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
}
</script></body>
</html>
按照楼主最初的代码，没体现出事件冒泡或事件捕获的机制，建议看看下面这篇文章，写得比较容易理解：
http://www.chhua.com/web-note1109
恩，楼主这个设计的有问题
如果是获取里面的div，并调用事件的话就不冒泡了，例如  <body>
<div  style="width:300px;height:300px;background:red;">
<div  id="cs" style="width:100px;height:100px;background:green;"></div>
</div>
<script>
var a,b,c;
a = document.getElementById('cs');
a.onmouseout = function(event) {
    e = event || window.event;
    cancelTheBubble(e);
    a.style.display = 'none';
}
function cancelTheBubble(e)
{
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
}
</script></body>
</html>
我理解大家的意思这个不是冒泡事件流。
但是这确实是一个 onmouseout的非逻辑事件，
我一开始以为用冒泡可以停止，但是现在无效了需要另想办发
我有两个思路但是具体怎么写还需要研究。
第一个就是用  小区块的 onmouseover  和 onmouseout 做抵消
第二个就是用  小区块做向上的循环查找  看时候父级以上区块是否有 id为事件绑定的区块，
但是具体要如何写还要想
用 onmouseover 事件抵消了。张经验了。谢谢大家。结贴了
有时间应该用  向上循环查找ID的办法做一个函数。

onmouseout 冒泡事件流 终止不了。急~！

解决方案 »

onmouseout 冒泡事件流终止不了。急~！