<style type="text/css">
#hide{ border: 1px solid #ccc; width: 300px; height: 300px; margin: 100px; padding: 10px; background: #f7f7f7; }
</style>
</head>
<body>
<p>文字<a href="#" id="wenzi">文字</a></p>
<p><a href="#" id="show">显示层</a></p>
<div id="hide">点击以外隐藏该层</div>
<script type="text/javascript">
document.documentElement.onclick = function() {
document.getElementById("hide").style.display = 'none';
}
function _stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById("hide").onclick = function(e) {
_stopPropagation(e);
}
document.getElementById("show").onclick = function(e) {
document.getElementById("hide").style.display = 'block';
_stopPropagation(e);
}
document.getElementById("wenzi").onclick=function(e){
_stopPropagation(e);
}
</script>
</body>
用的时候需要修改。就可以看到效果了，会JS的都懂的
根据这个的启示，实际上告诉我们。如果一个页面上面有2个相同的效果，一模一样，我们可以用到这个功能，阻止冒泡。这样就不会相互影响了。还是那句老话具体情况具体分析！！！
嘿嘿 demo查看