当前位置 : 主页 > 网络编程 > JavaScript >

uniapp @click事件冒泡问题解决示例

来源:互联网 收集:自由互联 发布时间:2023-12-05
目录 正文 示例 解析 正文 维护uniapp项目时,遇到了点击mywitch2后触发事件冒泡,然后百度了一大堆 发现大家讲的都是 :直接在max-box的父元素上加 @tap.stop.prevent 即可解决; 示例 view
目录
  • 正文
  • 示例
  • 解析

正文

维护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中的事件冒泡

  • @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 class="max-box" @tap.stop="waimian">
  <view @tap.stop="mywitch"></view>
</view></pre>

以上就是uniapp @click事件冒泡问题解决示例的详细内容,更多关于uniapp @click事件冒泡的资料请关注自由互联其它相关文章!

网友评论