微信小程序touchstart影响tap的解决方法

想给我的小程序做一个悬浮球组件，用来进行某些配置设置。但是悬浮球做好后，发现拖拽可以，但是tap事件无法触发。百度了一下，以下是官方的解释

 然后看了一下其他人的解决方案，发现太麻烦(毕竟不是专业前端)。于是想了下既然不能共存，那我就判断拖拽的位移嘛，看下能不能实现。通过对touchstart、touchmove和touchend的实验，发现是可行的。以下是实现代码:

wxml

<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相关操作
  }

}