使用@tap.stop阻止事件繼續(xù)傳播
更新時(shí)間：2022年03月26日 16:15:18 作者：%程序羊%
這篇文章主要介紹了使用@tap.stop阻止事件繼續(xù)傳播，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
@tap.stop阻止事件繼續(xù)傳播
在uni-app開發(fā)當(dāng)中，難免會(huì)遇到外層view嵌套內(nèi)層view，又同時(shí)都含有點(diǎn)擊事件，這樣就會(huì)起沖突。
為了防止事件的繼續(xù)傳播我們就會(huì)用到事件修飾符.stop
先看代碼：
<template> ?? ?<view class="wai" @tap="waiTab"> ?? ??? ?<h5>外面</h5> ?? ??? ?<view class="nei" @tap="neiTab"> ?? ??? ??? ?<h5>內(nèi)部</h5> ?? ??? ?</view> ?? ?</view> </template>
<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?waiTab(){
?? ??? ??? ??? ?console.log("點(diǎn)擊了外邊")
?? ??? ??? ?},
?? ??? ??? ?neiTab(){
?? ??? ??? ??? ?console.log("點(diǎn)擊了內(nèi)部")
?? ??? ??? ?}
?? ??? ?}
?? ?}
</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>效果是這樣的：
當(dāng)我們點(diǎn)擊外部時(shí)：
當(dāng)我們點(diǎn)擊內(nèi)部時(shí)：
解決方法：只需在@tap后面加.stop就可以阻止事件繼續(xù)傳播
<view class="wai" @tap.stop="waiTab"> <h5>外面</h5> <view class="nei" @tap.stop="neiTab"> <h5>內(nèi)部</h5> </view> </view>
uniapp+uview @tap.stop="stop"組織冒泡失效bug
阻止事件冒泡時(shí)，直接在需要使用的方法上加.stop無(wú)效
需要在外層加一層標(biāo)簽 <view @tap.stop=“stop”>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue element-ui el-cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法
這篇文章主要介紹了vue element-ui el-cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽窗口功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
一步步教你搭建VUE+VScode+elementUI開發(fā)環(huán)境
這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個(gè)人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下2023-07-07
解決在vue+webpack開發(fā)中出現(xiàn)兩個(gè)或多個(gè)菜單公用一個(gè)組件問(wèn)題
這篇文章主要介紹了在vue+webpack實(shí)際開發(fā)中出現(xiàn)兩個(gè)或多個(gè)菜單公用一個(gè)組件的解決方案,需要的朋友可以參考下2017-11-11
Vue中對(duì)數(shù)組和對(duì)象進(jìn)行遍歷和修改方式
這篇文章主要介紹了Vue中對(duì)數(shù)組和對(duì)象進(jìn)行遍歷和修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue項(xiàng)目配置vuex并開啟熱更新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁(yè)面同時(shí)更新的實(shí)現(xiàn)方法
這篇文章主要介紹了VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁(yè)面同時(shí)更新的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue項(xiàng)目history模式下微信分享爬坑總結(jié)
這篇文章主要介紹了Vue項(xiàng)目history模式下微信分享爬坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue的過(guò)濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02