dasdsasd

这样阻止事件冒泡

做项目时 有时候会遇到如下需求

1 点击某个元素 下面隐藏的元素就出现 

2 点击除这个元素外任何一个地方 这个元素都隐藏掉

3再次点击时再展开 如此反复 

编写是代码如下

<code>
<!doctype html>
<html>
	<head>冒泡测试</head>
	<body>
		<div id="checkthis" style="wIDth:100px; height:100px; background:#555">
			<span id="clickthis" style="display:block; width:100%; height:100%;">点击我显示下面文本</span>
		</div>
		<p id="getText" style="display:none">234242342342342423423423</p>
		<script>
			clickthis.onclick = function(){
				getText.style.cssText = "display:block;";
			}
			document.body.onclick = function(){
				getText.style.cssText = "display:none;";
			}

		</script>
	</body>	
</html>`
</code>

　运行测试 发现奇怪了 随便怎样点击这个元素 下面隐藏的元素都不会出来  其实这里就是事件冒到了body这。点击了div冒泡到了body 执行函数 所以下面的p元素一直是隐藏状态

　我们要阻止事件的冒泡 就要改变代码

   代码如下

   

<code>
<!doctype html>
<html>
	<head>冒泡测试</head>
	<body>
		<div id="checkthis" style="wIDth:100px; height:100px; background:#555">
			<span id="clickthis" style="display:block; width:100%; height:100%;">点击我显示下面文本</span>
		</div>
		<p id="getText" style="display:none">234242342342342423423423</p>
		<script>
			clickthis.onclick = function(e){
				e = window.event||event;
				sprint.innerHTML = "你点击的是span";
				getText.style.cssText = "display:block;";
				if(document.all){
					e.cancelBubble = true;/*IE*/
				}else{
 					e.stopPropagation();/*chrome firefox..*/
				}
			}
			document.body.onclick = function(){
				getText.style.cssText = "display:none;";
			}
		</script>
	</body>	
</html>`
</code>

　　好了 这样事件冒泡就被阻止了 想要的效果就实现了

posted @ 2012-06-13 18:02  小A的博客  阅读(214)  评论(0)    收藏  举报