Uniapp点透事件与阻止
uniapp中解决点透事件的正确姿势。
·
案例
<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后报错。
解决:
使用@click.native.stop
更多推荐
已为社区贡献4条内容
所有评论(0)