JS 阻止冒泡实例

<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查看