movable-view里的元素真机调试点击事件失效

174 阅读1分钟

页面如下,这只是写的一个demo,样式有点丑不要介意 请添加图片描述 我给置顶文字添加了click点击事件,在H5端和微信开发者工具中都能够触发点击事件,但是真机运行调试的时候不会触发点击事件,我看了其他帖子说的方法给movable-area元素添加CSS属性pointer-events:none,movable-view元素添加pointer-events:auto,但是也没有效果

在这里插入图片描述

最后是将click事件改成touchend事件才生效的 最终代码如下

<template>
	<movable-area
		class="drag-box"
		:style="{ height: drag.list.length * 50 + 'px', pointerEvents: 'none' }"
	>
		<movable-view
			direction="vertical"
			v-for="(item, i) in drag.list"
			class="item"
			:key="item.key"
			:x="0"
			:y="item.y"
			@change="handleMoving"
			@touchstart="handleDragStart(i)"
			@touchend="handleDragEnd"
			style="pointer-events: auto"
			catchmove="moveHandler"
		>
			<view class="">
				{{ item.name }}
			</view>
			<view class="right">
				<text @touchend="toTop(i)" class="top">置顶</text>
				<image src="@/static/image/category.png" mode="heightFix" class="img"></image>
			</view>
		</movable-view>
	</movable-area>
</template>