jQuery解决事件冒泡

水深无声 2023-10-05 14:45 22阅读 0赞

###### jQuery解决事件冒泡 ######

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery事件自动触发</title>
    		<script src="js/jquery-1.12.4.js"></script>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.father{
    				width: 400px;
    				height: 400px;
    				background: red;
    			}
    			.son{
    				width: 200px;
    				height: 200px;
    				background: blue;
    			}
    		</style>
    		<script>
    			$(function(){
    				//阻止事件冒泡的两种方法：
    //				$(".son").click(function(event){
    //					console.log("son");
    //					event.stopPropagation();
    //				});
    				$(".son").click(function(){
    					console.log("son");
    					return false;
    				});
    				$(".father").click(function(){
    					console.log("father");
    				});
    				//鼠标移入移出，也会产生事件冒泡
    //				$(".father").mouseover(function(){
    //					console.log("father移入了")
    //				});
    //				$(".father").mouseout(function(){
    //					console.log("father移出了")
    //				});
    				//解决事件冒泡
    				$(".father").mouseenter(function(){
    					console.log("father移入了");
    				})
    				$(".father").mouseleave(function(){
    					console.log("father移出了")
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div class="father">
    			<div class="son"></div>
    		</div>
    		
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020113014452031.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70