el evento de clic uniapp evita el burbujeo (práctico)

• pantalla de código

<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")
	},
},

• representaciones

• Haga clic en el evento 1, contenido de salida: (haga clic en el evento utilizado: @click.

 

• Haga clic en el evento 2, contenido de salida: (evento de clic utilizado: @click.stop) 

• Haga clic en el evento 3, contenido de salida: (evento de clic utilizado: @click)

Observaciones: @click.stop del evento evita que el evento burbujee, por lo que no se promete click1

• Escenario de aplicación 

Cuando aparecen varios eventos de clic en la misma página, el evento de clic del elemento principal no se activará cuando se haga clic en el elemento secundario

• El papel de @click.stop: evitar el burbujeo de eventos