阻止事件冒泡（点击子事件不触发父事件）

最新推荐文章于 2022-10-29 13:46:14 发布

_筱龙

最新推荐文章于 2022-10-29 13:46:14 发布

阅读量612

点赞数

分类专栏： H5 文章标签： javascript 前端 jquery

本文链接：https://blog.youkuaiyun.com/IT_qslong/article/details/123138432

版权

H5 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#container").bind('click', function(event) {
					alert('外层被点击了!');
				});
				$("#content").bind('click', function(event) {
					alert('内层被点击了');
					event.stopPropagation();
				});
			});
		</script>
	</head>
	<body>
		<div id="container" style="width: 100px;height: 100px;background: red;">
      <div id="content" style="width: 50px;height: 50px;background: green;">这里是内层</div>
		</div>
	</body>
</html>