• A+

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

现在有一个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>
 
所属分类:前端

全部评论: 0

    我有话说:
    ×