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

心已赠人 2021-06-10 20:41 654阅读 0赞

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

使用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>

感谢 [舞林][Link 1]的回答，

参考：[http://segmentfault.com/q/1010000000255340][http_segmentfault.com_q_1010000000255340]

[20160113153708522]: /images/20210522/693fe85c17914a43bbaa0d25d5b546a3.png
[Link 1]: http://segmentfault.com/u/wulin_140743
[http_segmentfault.com_q_1010000000255340]: http://segmentfault.com/q/1010000000255340