如何阻止事件冒泡

秒速五厘米 2022-11-19 07:42 233阅读 0赞

在页面开发中，我们使用JS添加事件后，默认情况事件会向上冒泡的。

<body>
    	<div class="parent">
    		<input type="button" class="child" value="仙剑奇侠传" >
    	</div>
    	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    	<script type="text/javascript">
    		$(".child").click(function(){
    			console.log('李逍遥');
    		});
    		$(".parent").click(function(){
    			console.log('赵灵儿');
    		});
    	</script>
    </body>

![2021012714344155.png][]

要阻止事件冒泡很简单，两个方法：1、调用**event.stopPropagation()**方法就行了，其中event就是事件参数；2、**return false**

**event.stopPropagation()**

<body>
    	<div class="parent">
    	    <input type="button" class="child" value="仙剑奇侠传" >
    	</div>
    	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    	<script type="text/javascript">
            //阻止事件冒泡，但不会阻止默认行为
    		$(".child").click(function(event){
    			console.log('李逍遥');
    			event.stopPropagation();
    		});
    		$(".parent").click(function(){
    			console.log('赵灵儿');
    		});
    	</script>
    </body>

![20210127143834258.png][]

这样我们这里点击按钮后，就不会触发div的事件了，就是说事件没有冒泡到div层了。

**return false**

<body>
    	<div class="parent">
    	    <a href="https://www.baidu.com" class="child">仙剑奇侠传</a>
    	</div>
    	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    	<script type="text/javascript">
            //阻止事件冒泡，也阻止默认行为
    		$(".child").click(function(event){
    			console.log('李逍遥');
    			return false;
    		});
    		$(".parent").click(function(){
    			console.log('赵灵儿');
    		});
    	</script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

**event.preventDefault()**

<body>
    	<div class="parent">
    		<a href="https://www.baidu.com" class="child">仙剑奇侠传</a>
    	</div>
    	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    	<script type="text/javascript">
    	    //不阻止事件冒泡，但阻止默认行为
    		$(".child").click(function(event){
    			console.log('李逍遥');
    			event.preventDefault();
    		});
    		$(".parent").click(function(){
    			console.log('赵灵儿');
    		});
    	</script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

### 总结：  ###

1.event.stopPropagation();   
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（执行超链接的跳转）   
2.return false;   
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）   
还有一种与冒泡有关的：   
3.event.preventDefault();   
事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

[2021012714344155.png]: /images/20221119/a96928399d664d0e844efda2fbe961a0.png
[20210127143834258.png]: /images/20221119/b2f41d9ffc3b4a73994febd63a3b8043.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221119/ffd221144b854e35bb88d9859f35356b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221119/a477436c903d42eea09974fc9cbe8963.png