事件冒泡问题
事件冒泡问题其实就是，一个操作触发了多个响应，比如body定义了onclick的事件，body下面的div也定义了onclick事件，那点了div之后，先做了div的事件响应，然后向上冒泡，body的click事件也被触发了。
解决的办法也不麻烦，但是依旧要迁就IE和FF这俩好基友的矛盾：
IE里面阻止冒泡，使用： 事件对象.cancelBubble=true;
FF里面阻止冒泡，使用： 事件对象.stopPropagation(); （刚才查了一下，propagation [,prɔpə'ɡeiʃən] 的意思是繁殖，繁衍。。原谅我的词汇量吧TvT）
好了为了让这对好基友和谐相处，我们只好再做一个判断：
复制代码 代码如下:
function xxxxx(event){
.........;
if(event&&event.stopPropagation) //说明是个火狐
event.stopPropagation();
else
event.cancleBubble=true;
}
当然，这个判断要写在下层的结点里，比如刚才的例子里，如果把它写在body的click事件里，那就是做无用功了。
--------------------------------------------------------------------------------
最后，一个小应用，是对输入的情况判断，我们注册网站的时候常遇到的：
代码如下：
复制代码 代码如下:
<html>
<head>
<style>
<!--
#checkspan
{
display: none;
color: #ff0000;
}
//-->
</style>
<title>testing</title>
<script type="text/javascript" src="https://www.jb51.net/js/output.js"></script>
</head>
<body>
Input: <input type="text" onblur="blured()"><span></span>
<script type="text/javascript">
function blured(){
var obj=document.getElementById("checkspan");
var s=document.getElementById("input").value;
if(s.length<5)
obj.innerHTML=" too short";
else{
obj.innerHTML=" correct";
obj.style.color="green"
}
obj.style.display="inline";
}
</script>
</body>
</html>
效果如下：
您可能感兴趣的文章: