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

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

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>
上一篇:2020-11-25Hbase general命令


下一篇:记录内网渗透学习进程--DAY20