欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用@tap.stop阻止事件繼續(xù)傳播

 更新時間：2022年03月26日 16:15:18   作者：%程序羊%  
這篇文章主要介紹了使用@tap.stop阻止事件繼續(xù)傳播，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

@tap.stop阻止事件繼續(xù)傳播

在uni-app開發(fā)當中，難免會遇到外層view嵌套內層view，又同時都含有點擊事件，這樣就會起沖突。

為了防止事件的繼續(xù)傳播我們就會用到事件修飾符.stop 

先看代碼：

<template>
?? ?<view class="wai" @tap="waiTab">
?? ??? ?<h5>外面</h5>
?? ??? ?<view class="nei" @tap="neiTab">
?? ??? ??? ?<h5>內部</h5>
?? ??? ?</view>
?? ?</view>
</template>
<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?waiTab(){
?? ??? ??? ??? ?console.log("點擊了外邊")
?? ??? ??? ?},
?? ??? ??? ?neiTab(){
?? ??? ??? ??? ?console.log("點擊了內部")
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
<style>
?? ?.wai{
?? ??? ?width: 100%;
?? ??? ?height: 100px;
?? ??? ?display: flex;
?? ??? ?justify-content: center;
?? ??? ?background-color: #0000FF;
?? ?}
?? ?.nei{
?? ??? ?display: flex;
?? ??? ?justify-content: center;
?? ??? ?align-items: center;
?? ??? ?width: 50px;
?? ??? ?height: 50px;
?? ??? ?background-color: #00CE47;
?? ?}
</style>

效果是這樣的：

當我們點擊外部時：

當我們點擊內部時：

解決方法：只需在@tap后面加.stop就可以阻止事件繼續(xù)傳播

<view class="wai" @tap.stop="waiTab">
		<h5>外面</h5>
		<view class="nei" @tap.stop="neiTab">
			<h5>內部</h5>
		</view>
	</view>

uniapp+uview @tap.stop="stop"組織冒泡失效bug

阻止事件冒泡時，直接在需要使用的方法上加.stop無效

需要在外層加一層標簽 <view @tap.stop=“stop”>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論