uniapp @click 事件冒泡問題解決

維護uniapp項目時,遇到了點擊mywitch2後觸發事件冒泡,然後百度了一大堆 發現大家講的都是 :直接在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>

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

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

  1. @click是組件被點擊時觸發,會有約300ms的延遲(內置處理優化了);
  2. @tap是手指觸摸離開時觸發,沒有300ms的延遲,但是會有事件穿透;
  3. 編譯到小程序端,@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 class="max-box" @tap.stop="waimian">
  <view @tap.stop="mywitch"></view>
</view></pre>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章