关于jQuery与JS的阻止冒泡与阻止默认事件处理

　　随着接触jQery与JS越多，发现自己有时会对两者的用法有混淆。这不，今天做一个事件处理的时候就发现问题了。

　　在之前的脑海里，只有preventDefault(阻止默认事件)、stopPropagation(阻止冒泡)这两个事件的概念，但是具体到针对某一个要做兼容处理的时候还是不确定js和jQuery用到他们时的区别。于是，就开始查资料，结果发现网上也是层次不齐，不是很能解决我的疑惑，于是自己动手写代码去实践。

　　首先简单介绍下默认事件与冒泡事件概念：

1. 默认事件：指浏览器的默认动作。比如a链接指定了跳转地址，设置阻止默认事件后，它就不能进行跳转了。
2. 冒泡事件：指事件从原始元素开始一直冒泡到DOM树的最上层。比如子元素和父元素都注册了点击事件，如果没有阻止冒泡事件，那么当点击子元素时，父元素上的注册事件也会发生。

首先，用jQuery做了如下实验：

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>默认事件与冒泡事件</title>
</head>
<body>
	<div id="box">
		<a href="http://www.baidu.com" id="testLink">百度</a>
	</div> 
	<script src="mod/jquery-1.7.1.min.js"></script>
	<script type="text/javascript"> 
		function stopDefault( e ) { 
		    e.preventDefault()
		} 
		function stopPropagation( e ) { 
		　　e.stopPropagation()
		} 
		$('#testLink').on('click',function(e) { 
		   console.log('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
		   stopDefault(e); 
		   stopPropagation(e); 
		})
		$('#box').on('click',function(e) { 
		   console.log('我是外面的盒子'); 
		})
	</script>
</body>
</html>

　　以上没有做任何兼容处理，在ie7及以上浏览器中均运行成功（即都成功的阻止了冒泡事件与默认事件）。且注意的一点是事件”e“也不需要做e = event || window.event处理。

　　然后我又在基本语法不变的情况下用JS做实验，代码如下：

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>默认事件与冒泡事件</title>
</head>
<body>
	<div id="box">
		<a href="http://www.baidu.com" id="testLink">百度</a>
	</div> 
	<script type="text/javascript"> 
		var e,
			oBox = document.getElementById('box'),
			oLink = document.getElementById('testLink');
		function stopDefault( e ) { 
		    e.preventDefault()
		} 
		function stopPropagation( e ) { 
			e.stopPropagation()
		} 
		oLink.onclick = function(e) { 
		   console.log('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
		   stopDefault(e); 
		   stopPropagation(e); 
		}
		oBox.onclick = function(e) { 
		   console.log('我是外面的盒子'); 
		}
	</script>
</body>
</html>

　　发现总是报错：，经过改良，加上兼容处理，代码如下：

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>默认事件与冒泡事件</title>
</head>
<body>
	<div id="box">
		<a href="http://www.baidu.com" id="testLink">百度</a>
	</div> 
	<script type="text/javascript"> 
		var oBox = document.getElementById('box'),
			oLink = document.getElementById('testLink');
		function stopDefault( e ) { 
		    if (e && e.preventDefault) {
		    	e.preventDefault();
		    }else{
		    	e.returnValue = false;
		    }
		} 
		function stopPropagation( e ) { 
			if (e.stopPropagation) {
				e.stopPropagation()
			} else{
				e.cancelBubble = true;
			};
		} 
		oLink.onclick = function(event) { 
			var e = event || window.event
		    console.log('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
		    stopDefault(e); 
		    stopPropagation(e); 
		}
		oBox.onclick = function() { 			
		    console.log('我是外面的盒子'); 
		}
	</script>
</body>
</html>

　　结果ie7及以上也都成功了。特别注意要处理event兼容，不然也会报错。

以上实验，终于理清了我脑海里的不明确，希望大家以此为鉴，碰到不清楚的问题自己实践一遍。加强记忆的同时也能收获一些意外的知识。加油！