JavaScript阻止冒泡事件的事例

最新推荐文章于 2024-08-11 18:40:36 发布

salmonl

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量1.3k

点赞数

分类专栏： JS回顾文章标签： javascript

本文链接：https://blog.csdn.net/littlebo01/article/details/16828117

版权

JS回顾专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从今天开始要深入JS了，之前仅有基础知识，今天在阅读代码的时候有一个阻止冒泡事件的Function()，于是就研究了起来。

找到了一份很好的资料，与大家分享，这篇博文只用了几句话就解释清楚了。

原文：JS阻止冒泡。

简单的实现了一下，整了半天，代码如下：

<html>
	<head>
	   <style type="text/css">
         #hide{
         	width:75%;height:80px;background:skyblue;display:block;
         }
         .hander{cursor:pointer;}
         input{
         	margin:5 0 0 900;
         }
	   </style>

       <script>
        //不用window.onload也可以
         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阻止冒泡方法  
		    }  
		}
		//方法必须要放在window.onload下
		window.onload = function(){
			document.getElementById("hide").onclick = function(e) {
   			 	stopPropagation(e);
		    }

		    document.getElementById('btn_show').onclick = function(e) {  
	        	document.getElementById('hide').style.display = 'block';  
	        	stopPropagation(e);  
			}
		}
		
      </script>
	</head>
	<body>
		<div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
		<input type="button" id="btn_show" value="show" class="hander"/>
	</body>
</html>