使用@tap.stop阻止事件繼續(xù)傳播
更新時間：2022年03月26日 16:15:18 作者：%程序羊%
這篇文章主要介紹了使用@tap.stop阻止事件繼續(xù)傳播，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
@tap.stop阻止事件繼續(xù)傳播
在uni-app開發(fā)當(dāng)中，難免會遇到外層view嵌套內(nèi)層view，又同時都含有點(diǎn)擊事件，這樣就會起沖突。
為了防止事件的繼續(xù)傳播我們就會用到事件修飾符.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)擊外部時：
當(dāng)我們點(diǎn)擊內(nèi)部時：
解決方法：只需在@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
阻止事件冒泡時，直接在需要使用的方法上加.stop無效
需要在外層加一層標(biāo)簽 <view @tap.stop=“stop”>
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue2中vue.config.js簡單配置代理跨域的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實(shí)例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue slot用法(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動,感興趣的朋友可以參考下實(shí)現(xiàn)代碼2024-05-05
今天遇到一個bug,有一個Element的message組件,用它做的一個進(jìn)度條,它是寫在一個頁面上,并且是用js控制dom元素的,web端一切正常,但是,H5頁面刷新的時候它樣式加載不出來了,所以本文主要介紹了Vue項(xiàng)目刷新后h5樣式失效的原因及解決方案,需要的朋友可以參考下2024-10-10
使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能
這篇文章主要介紹了使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁面時保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue對插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07