uniapp?@click事件冒泡問題解決示例
更新時(shí)間：2023年07月10日 14:14:24 作者：小李不小
這篇文章主要為大家介紹了uniapp?@click事件冒泡問題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
維護(hù)uniapp項(xiàng)目時(shí)，遇到了點(diǎn)擊mywitch2后觸發(fā)事件冒泡，然后百度了一大堆 發(fā)現(xiàn)大家講的都是 ：直接在max-box的父元素上加 @tap.stop.prevent 即可解決；
示例
<view @click="mywitch1"> <view class="max-box" @tap.stop.prevent> <!-- switch --> <view @click.stop="mywitch2"></view> </view> </view>
如：
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background, font-size, border-color, border-radius, border-width, padding, margin, color; overflow: auto; font-family: "Courier New", serif; font-size: 12px; overflow-wrap: break-word;"><view> <view class="max-box" @tap.stop.prevent> <!-- switch --> <view @change.stop="mywitch"></view> </view> </view></pre>
解析
如果父容器存在點(diǎn)擊事件時(shí)，父容器是@click.stop或者是@click.native.stop仍會(huì)不能阻止view組件的冒泡
需要了解@tap和@click的區(qū)別，然后直接使用 @tap.stop 即可阻止Switch中的事件冒泡
- @click是組件被點(diǎn)擊時(shí)觸發(fā)，會(huì)有約300ms的延遲（內(nèi)置處理優(yōu)化了）；
- @tap是手指觸摸離開時(shí)觸發(fā)，沒有300ms的延遲，但是會(huì)有事件穿透;
編譯到小程序端，@click會(huì)被轉(zhuǎn)換成@tap；
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background, font-size, border-color, border-radius, border-width, padding, margin, color; overflow: auto; font-family: "Courier New", serif; font-size: 12px; overflow-wrap: break-word;"><view class="max-box" @tap.stop="waimian"> <view @tap.stop="mywitch"></view> </view></pre>
以上就是uniapp @click事件冒泡問題解決示例的詳細(xì)內(nèi)容，更多關(guān)于uniapp @click事件冒泡的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript中Array.from()的超全用法詳解
Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對(duì)象（array-like?object）和可遍歷（iterable）的對(duì)象（包括?ES6?新增的數(shù)據(jù)結(jié)構(gòu)?Set?和?Map），別忘記就來講講他的具體用法吧2023-03-03
JS日期對(duì)象簡(jiǎn)單操作（獲取當(dāng)前年份、星期、時(shí)間）
這篇文章主要介紹了JS日期對(duì)象簡(jiǎn)單操作,獲取當(dāng)前年份、星期、時(shí)間等代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
javascript實(shí)現(xiàn)簡(jiǎn)易聊天室
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易聊天室，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
JavaScript異步編程之Async/Await用法完全指南
async/await是JavaScript中基于Promise的異步語法糖,使異步代碼更直觀易讀,這篇文章主要介紹了JavaScript異步編程之Async/Await用法完全指南的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-01-01
JavaScript實(shí)現(xiàn)放大鏡效果代碼示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)放大鏡效果代碼示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript漢諾塔問題解決方法,涉及javascript遞歸調(diào)用操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript中setTimeout使用重要的注意事項(xiàng)總結(jié)
setTimeout用于延遲執(zhí)行函數(shù),異步特性使其不阻塞代碼,這篇文章主要介紹了JavaScript中setTimeout使用注意事項(xiàng)的相關(guān)資料,需注意作用域綁定、參數(shù)傳遞、取消定時(shí)器及精確度問題,需要的朋友可以參考下2025-05-05
some()方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件函數(shù)提供,這篇文章主要介紹了JS中的數(shù)組的some()方法示例解析,需要的朋友可以參考下2025-04-04
大家都知道Promise解決了回調(diào)地獄的問題,“回調(diào)地獄”所說的嵌套其實(shí)是指異步的嵌套,它帶來了兩個(gè)問題:可讀性的問題和信任問題,下面這篇文章主要給大家介紹了關(guān)于JS中promise特點(diǎn)與信任問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了微信小程序激勵(lì)式視頻廣告組件使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12