首页 > Web开发 > 详细

JS阻止事件冒泡

时间:2014-01-21 00:47:00      阅读:423      评论:0      收藏:0      [点我收藏+]

如下测试代码:

<style type="text/css">
	#div{border: 1px solid red;width: 500px;}
	#p1,#p2{border: 1px solid red;}
</style>
<div id="div" onclick="clickDiv()">
	我是外层DIV
	<p id="p1" onclick="clickP1(event);">我是P1 阻止事件冒泡</p>
	<p id="p2" onclick="clickP2();">我是P2 未阻止事件冒泡</p>
</div>

JS阻止事件冒泡代码:

<script type="text/javascript">
			
	function clickDiv(){
		alert("我是外层DIV");
	}
	function clickP1(e){
		alert("p1 阻止事件冒泡");
		e.stopPropagation();
	}
	function clickP2(){
		alert("p2 未 阻止事件冒泡");
	}
	
</script>

jQuery阻止事件冒泡代码:

$(function(){
	$("#div").click(function(){
		alert("我是外层DIV");
	})
	$("#p1").click(function(event){
		alert("p1 阻止");
		event.stopPropagation();
	})
	$("#p2").click(function(){
		alert("p2 未阻止");
	})
})

有时候点击提交按钮会有一些默认事件。比如表单提交(submit)

可通过event.preventDefault();阻止默认行为

$("input[type=‘submit‘]").click(function(event){
	//在这里可以加入一些逻辑判断  以决定是否阻止默认行为
	event.preventDefault();
})

PS:很多文章都提到下面代码

function stopDefault(e) {  
	//如果提供了事件对象,则这是一个非IE浏览器   
	if(e && e.preventDefault) {  
	  //阻止默认浏览器动作(W3C)  
	  e.preventDefault();  
	} else {  
	  //IE中阻止函数器默认动作的方式   
	  window.event.returnValue = false;   
	}  
	return false;  
}
先判断浏览器是否IE浏览器,本人的是IE9  无需判断

照样可以阻止事件冒泡。

对此问题不解...  不知道大家是人云亦云呢,还是我的方法不对bubuko.com,布布扣



JS阻止事件冒泡

原文:http://blog.csdn.net/itmyhome1990/article/details/18222181

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!