uniapp?@click事件冒泡問(wèn)題解決示例
更新時(shí)間：2023年07月10日 14:14:24 作者：小李不小
這篇文章主要為大家介紹了uniapp?@click事件冒泡問(wèn)題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(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是手指觸摸離開(kāi)時(shí)觸發(fā)，沒(méi)有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事件冒泡問(wèn)題解決示例的詳細(xì)內(nèi)容，更多關(guān)于uniapp @click事件冒泡的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決ie img標(biāo)簽內(nèi)存泄漏的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決ie img標(biāo)簽內(nèi)存泄漏的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
javascript 循環(huán)調(diào)用示例介紹
循環(huán)調(diào)用,如果已經(jīng)獲取到了結(jié)果,則退出循環(huán)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以嘗試操作下2013-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多文件或者圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了微信小程序左右滾動(dòng)公告欄效果代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之集合(Set)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之集合(Set),結(jié)合實(shí)例形式詳細(xì)分析了javascript中集合的概念、原理、定義及相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
JavaScript調(diào)用COM傳遞數(shù)組時(shí)，在COM接口端，接收到的是VARIANT類(lèi)型對(duì)象，如array，該對(duì)象的vt類(lèi)型VT_DISPATCH，因此其值表示的是一個(gè)IDispatch類(lèi)型的指針。2009-11-11
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
png-8模式的圖片，如果沒(méi)有漸變的話是透明的，如果有漸變就不透明了。需要js的支持。2010-02-02
基于js?+?html2canvas實(shí)現(xiàn)網(wǎng)頁(yè)放大鏡功能
最近接到任務(wù),需實(shí)現(xiàn)【網(wǎng)頁(yè)】放大鏡的效果,百度搜索?【js?放大鏡】關(guān)鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實(shí)現(xiàn),根本無(wú)法滿足我的需求,于是自己花了點(diǎn)時(shí)間調(diào)研實(shí)現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12
淺析Javascript中bind()方法的使用與實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇淺析Javascript中bind()方法的使用與實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，一起跟隨小編過(guò)來(lái)看看吧2016-04-04