master

分支 (2)

管理

管理

master

dev_test

web-test
/
点击子元素防止触发父元素点击事件.html

<html>
	<title></title>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.divone {
				width: 100px;
				height: 100px;
				background: black;
				position: relative;
				cursor: pointer
			}

			.divchild {
				position: absolute;
				margin: 10px;
				width: 50px;
				height: 50px;
				background: white;
				cursor: pointer
			}
		</style>
		<script type="text/javascript">
			function divone() {
				//这里是divone事件的代码
				console.log('divone事件');
				stopPropagation();
			}

			function divchild() {
				//这里是divchild事件的代码
				console.log('divchild事件');
				stopPropagation();
			}

			function stopPropagation(e) {
				e = e || window.event;
				if (e.stopPropagation) { //W3C阻止冒泡方法
					e.stopPropagation();
				} else {
					e.cancelBubble = true; //IE阻止冒泡方法
				}
			}
		</script>
	</head>
	<body>
		<div class="divone" onclick="divone(this)">
			<div class="divchild" onclick="divchild(this)"></div>
		</div>
	</body>
</html>