其他分享
首页 > 其他分享> > 两个div叠在一起各自调用不同的方法/ 阻止子元素的click事件冒泡到父元素 /event.stopPropagation() 的使用

两个div叠在一起各自调用不同的方法/ 阻止子元素的click事件冒泡到父元素 /event.stopPropagation() 的使用

作者:互联网

1、效果图:

2、event.stopPropagation() 定义
菜鸟教程:https://www.runoob.com/jquery/event-stoppropagation.html

3、例子:

点击查看代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阻止子元素的click事件冒泡到父元素</title>
	</head>
	<style>
		.parent{
			width: 300px;
			height: 200px;
			background-color: #1E9FFF;
		}
		.children{
			width: 30%;
			height: 40%;
			padding: 20px;
			background-color: #8A2BE2;
		}
	</style>
	<body>
		<div class="parent" id="parent">
			<div class="children" id="children">子元素</div>
			<br />父元素
		</div>
	</body>
	<script type="text/javascript" src="../../js/jquery-3.5.1.min.js" ></script>
	<script>
		$("#parent").click(function(){
			alert("你点击了父元素的方法!");
		});
		
		$("#children").click(function(event){
			event.stopPropagation();  // 阻止子元素(input)的click事件冒泡到父元素(div)
			alert("你点击了子元素的方法.......")
		});
	</script>
</html>

标签:event,到父,元素,stopPropagation,冒泡,click
来源: https://www.cnblogs.com/dayu33/p/15530200.html