使用@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”>
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關于vue2中vue.config.js簡單配置代理跨域的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
Vue.js基礎指令實例講解(各種數據綁定、表單渲染大總結)
這篇文章主要為大家詳細介紹了Vue.js基礎指令實例，各種數據綁定、表單渲染大總結，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue slot用法(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了vue如何使用pdf-dist實現pdf預覽以及水印添加的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
這篇文章主要介紹了vue+elementUI實現點擊左右箭頭切換按鈕功能,樣式可以根據自己需求改動,感興趣的朋友可以參考下實現代碼2024-05-05
今天遇到一個bug,有一個Element的message組件,用它做的一個進度條,它是寫在一個頁面上,并且是用js控制dom元素的,web端一切正常,但是,H5頁面刷新的時候它樣式加載不出來了,所以本文主要介紹了Vue項目刷新后h5樣式失效的原因及解決方案,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了使用vue自定義如何實現Tree組件和拖拽功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
最近正在使用Pinia進行狀態(tài)管理,我希望在重新刷新頁面時保持狀態(tài),下面這篇文章主要給大家介紹了關于Pinia簡單使用以及數據持久化的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue對插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07