uni-app事件冒泡 如何解决事件冒泡 推荐tap事件

文章描述:

uniapp在使用tap里面包含tap的时候,事件会重复,如何处理事件重复问题!

html

<template>
	<view>
		<view class="max-box" @tap="a">	
			<view class="in-box" @tap="b"></view>
		</view>
	</view>
</template>

script

export default{
	data(){
		return{
			
		}
	},
	methods:{
		a(){
			console.log('a')
		},
		b(){
			console.log('b')
		}
	}
}

style

.max-box{
	width:400rpx;
	height:400rpx;
	background:#666;
	display: flex;
	justify-content: center;
	align-items: center;
	.in-box{
		background: #fff;
		width: 80rpx;
		height: 80rpx;
	}
}

点击外面的时候,不会触发里面元素的事件 但是点击里面元素的时候,就会触发外面元素的事件,这就是冒泡哈!!

解决事件冒泡

添加一个stop,就会阻止里面这个元素冒泡

<view class="max-box" @tap="a">	
	<view class="in-box" @tap.stop="b"></view>
</view>

 

在手机上 推荐使用的事件是tap

发布时间:2023/05/16

发表评论