JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件

最新推荐文章于 2023-04-11 09:00:00 发布

天南韩立

最新推荐文章于 2023-04-11 09:00:00 发布

阅读量1.8w

点赞数 4

分类专栏： JavaScript JQuery 文章标签： js阻止冒泡 div a JQuery 阻止外层事件

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JQuery

8 篇文章 0 订阅

订阅专栏

现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。

使用JQuery可以简单地实现，只需要加入如下代码：

event.stopPropagation();

阻止事件冒泡。

完整的测试代码如下，可以拷贝直接测试：

<!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() {
				$("#hanli").bind('click', function(event) {
					alert('外层的div被点击了!');
				});
				$("#dianji").bind('click', function(event) {
					alert('里面的a点击，但是不想触发外面那个div的事件。');
					event.stopPropagation();
				});
			});
		</script>
		<title>JQuery实现点击div里面的a的能触发点击时间，但是不触发外面的div的点击事件</title>
	</head>

	<body>
		<div id="hanli" style="background-color: #DDDDDD; width: 400px; height: 300px; margin: 0px auto;">
			<a href="#" id="dianji">点击这里并不让外层的div事件触发</a>
		</div>

	</body>

</html>

感谢舞林的回答，

参考：http://segmentfault.com/q/1010000000255340

天南韩立

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件

现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。使用JQuery可以简单地实现，只需要加入如下代码：event.stopPropagation();阻止事件冒泡。
复制链接

扫一扫