uniapp?@click事件冒泡問題解決示例

目錄正文示例解析正文

維護uniapp項目時，遇到了點擊mywitch2后觸發事件冒泡，然后百度了一大堆 發現大家講的都是 ：直接在max-box的父元素上加 @tap.stop.prevent 即可解決；

示例<view @click='mywitch1'>　　<view @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 @tap.stop.prevent>　　　　　　<!-- switch -->　　　 　　<view @change.stop='mywitch'></view>　　</view></view></pre>解析

如果父容器存在點擊事件時，父容器是@click.stop或者是@click.native.stop仍會不能阻止view組件的冒泡

需要了解@tap和@click的區別，然后直接使用 @tap.stop 即可阻止Switch中的事件冒泡

@click是組件被點擊時觸發，會有約300ms的延遲（內置處理優化了）；@tap是手指觸摸離開時觸發，沒有300ms的延遲，但是會有事件穿透;

編譯到小程序端，@click會被轉換成@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 @tap.stop='waimian'>　　<view @tap.stop='mywitch'></view></view></pre>

以上就是uniapp @click事件冒泡問題解決示例的詳細內容，更多關于uniapp @click事件冒泡的資料請關注好吧啦網其它相關文章！