Uniapp点透事件与阻止

最新推荐文章于 2024-04-22 17:01:29 发布

stoiCasey

最新推荐文章于 2024-04-22 17:01:29 发布

阅读量7.8k

点赞数 5

文章标签： vue.js 前端 uni-app

本文链接：https://blog.csdn.net/weixin_42216094/article/details/120262982

版权

案例

<view class="item">
  <view class="item-title">
    <text>日期</text>
  </view>
  <view class="item-content">
    <view class="item-content-timeBox">
      <u-picker
        mode="time"
        v-model="showStartTimePicker"
        @confirm="confirmStartTime"
      ></u-picker>
      <view
        class="item-content-chooseTime"
        @click.native.stop="chooseStartTime"
        :class="{ noTimeStyle: startTime == null }"
      >
        {{ startTime || "请选择开始日期" }}
        <u-icon
          v-show="startTime != null"
          @click.native.stop="clearStartTime"
          class="clearTimeBtn"
          name="close-circle"
          size="30"
        ></u-icon>
      </view>
    </view>
    <text class="timeBridge">至</text>
    <view class="item-content-timeBox">
      <u-picker
        mode="time"
        v-model="showEndTimePicker"
        @confirm="confirmEndTime"
      ></u-picker>
      <view
        class="item-content-chooseTime"
        @click.native.stop="chooseEndTime"
        :class="{ noTimeStyle: endTime == null }"
      >
        {{ endTime || "请选择结束日期" }}
        <u-icon
          v-show="endTime != null"
          @click.native.stop="clearEndTime"
          class="clearTimeBtn"
          name="close-circle"
          size="30"
        ></u-icon>
      </view>
    </view>
  </view>
</view>

问题：

点击删除icon时候，触发了下方的picker组件的click事件。

错误：

如果使用@tap.stop阻止传播的话会报错：Error: "TypeError: $event.stopPropagation is not a function" 原因是：Uniapp不支持stopPropagation，因为这里的event对象并非浏览器的evnet对象，其本来没有stopPropagation方法，文档中也从未提及支持stopPropagation方法，实现中有stopPropagation方法是为了避免开发者使用引用的第三方代码使用了 stopPropagation后报错。