uniapp?@click事件冒泡問(wèn)題解決示例

目錄 正文 示例 解析 正文 維護(hù)uniapp項(xiàng)目時(shí)，遇到了點(diǎn)擊mywitch2后觸發(fā)事件冒泡，然后百度了一大堆 發(fā)現(xiàn)大家講的都是 ：直接在max-box的父元素上加 @tap.stop.prevent 即可解決； 示例 view

目錄

• 正文
• 示例
• 解析

正文

維護(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: &quot;Courier New&quot;, 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: &quot;Courier New&quot;, 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)注技圈網(wǎng)其它相關(guān)文章！