我是写的悬浮球,所以必须要兼顾拖拽和触摸事件。以下方法可以进行拖拽和tap同时实现 html: <view catchtouchstart="dragStart" catchtouchmove="drag" catchtouchend="dragEnd"> </view> js: data: { startX: 0, startY: 0, isDragging: false, isDrag:false //是否是拖拽操作 } //移动开始 dragStart(e) { this.setData({ startX: e.touches[0].clientX, startY: e.touches[0].clientY, isDragging: true, }); }, //移动目标 drag(e) { if (!this.data.isDragging) return; let deltaX = e.touches[0].clientX - this.data.startX; let deltaY = e.touches[0].clientY - this.data.startY; //横向和纵向位移小于1时,认为没有对目标进行移动 let dragFlag = this.data.isDrag || deltaX >1 || deltaY >1 this.setData({ isDrag:dragFlag, startX: e.touches[0].clientX, startY: e.touches[0].clientY }); }, //移动结束 dragEnd(e) { const dragFlag = this.data.isDrag; //先回写状态,再进行操作。 this.setData({ isDragging: false, isDrag:false }); if(!dragFlag){ //此处写tap相关操作 } } 希望对你有帮助
外层使用catchtouchstart影响内层tap事件响应bug表现: 如题,如果我在外层的view catch了touchstart那么内层的tap事件会不响应。不知道这个是不是bug。 - 预期表现 内层tap事件正常响应。如果不能正常响应那么就会有一个在我看来很严重的问题,首先假定现在有三层,内层、外层、最外层(也是在代码片段里简单演示了),如果我最外层里面有touch的逻辑,同时不希望点击在内层的时候响应,应该怎么办。如果在外层catch那内层的tap不能用,如果不catch那就达不到要求。 - 复现路径 点击代码片段中的外层可捕捉到touch事件,点击内层无法响应tap事件 - 提供一个最简复现 Demo 已附代码片段
06-20