开发场景:首页底层地图和顶层拖拽数据列表
在父元素使用触摸事件时,使用.stop来阻止事件传播,防止下层地图的移动,从而实现列表的拖拽移动,但是带来的问题是子元素的点击事件无法触发。(以下为简略代码表述)
<map
id="amap"
style="width: 750rpx; height: 100vh"
:latitude="latitude"
:longitude="longitude"
></map>
<view
@touchstart.stop="touchStart"
@touchmove.stop="touchMove"
@touchend.stop="touchEnd"
>
<view @click="onClick">我被点了</view>
</view>
解决方案:
<view
@touchstart="touchStart"
@touchmove.stop="touchMove"
@touchend="touchEnd"
>
<view @click="onClick">我被点了</view>
</view>
地图不会因为拖拽列表的移动而移动了,而点击事件也正常了