JQ 点击一个div 里面的另外一个div 如何不触发外部div

使用jq点击想实现隐藏显示时发现在父级div 里面点击子div 会触发父级div 的点击事件

这样会造成点了子div 想隐藏一个物体但是发现无法隐藏，会让人觉得是不是因为jq 代码错误

元素模板为您解答如何写正确的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JQuery实现点击里层div事件，不触发外面的div的点击事件</title>
	</head>
 
	<body>
		<div id="outter" style="background-color: #DDDDDD; width: 400px; height: 200px; margin: 0px auto;">
			<div id="inner" style="background-color: #ffffff; width: 300px; height: 100px; margin-left: 50px;">点击这里并不让外层的div事件触发</div >
		</div>
	</body>
 	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#outter").bind('click', function(event) {
					alert('外层的div被点击了!');
				});
				$("#inner").bind('click', function(e) {
				//区分不同浏览器内核情况
					var e = window.event || e;
        			if (e.stopPropagation) e.stopPropagation();
        			else e.cancelBubble = true;
					alert('里面的div被点击了，但是不触发外层div的事件。');
				});
			});
		</script>
</html>