uniapp点击事件阻止冒泡(实用)

• 代码展示

<view style="height: 600rpx;background-color: red;" @click="click1">
	点击事件1
	<view style="height: 400rpx;background-color:skyblue;" @click.stop="click2">
		点击事件2
		<view style="height: 200rpx;background-color: gray;" @click="click3">
    		点击事件3
    	</view>
	</view>
</view>

methods:{
	click1(){
		console.log("click1")
	},
	click2(){
		console.log("click2")
	},
	click3(){
		console.log("click3")
	},
},

• 效果图

• 点击事件1，输出内容：（使用的点击事件：@click.

 

• 点击事件2，输出内容：（使用的点击事件：@click.stop） 

• 点击事件3，输出内容：（使用的点击事件：@click）

备注：事件的@click.stop防止了事件冒泡，所以不会答应click1

• 应用场景 

当同一个页面出现多个点击事件的时候，点击子元素时不会触发父元素的点击事件

• @click.stop的作用：阻止事件冒泡