微信浏览器移动端长按撤回消息

PC端撤回消息功能是用右击事件即contextmenu出现popover，移动端使用长按事件出现popover来实现撤回消息功能，可是js并无提供长按事件，那该怎么解决呢？

相关环境：微信浏览器+React+腾讯TIMsdk

第一步：使用onTouchStart，onTouchEnd模拟移动端的长按事件

在onTouchStart事件里添加一个定时器，时间设置为700ms(多长时间本身定)，定时器回调函数的逻辑是打开一个菜单，菜单有撤回选项；
在onTouchEnd事件里的逻辑是移除定时器，由于若是长按事件未超过700ms，那么此时不用显示菜单，清除掉定时器是符合逻辑的，若是长按时间超过了700ms，此时，回调函数已经执行了，菜单已经显示出来了，此时清楚掉定时器已经没有关系了。

onTouchStart() {
   this.timerId = setTimeout(() => { 
      // 打开菜单的逻辑
   }, 700)
}
  
onTouchEnd() {
  clearTimeout(this.timerId)
}

第二步：给body添加样式，以去掉移动端长按会出现的默认菜单

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

问题：给body添加此样式后，致使其余页面，长按也不出现默认菜单，这个默认菜单，用户也是须要用到的，里面有复制功能

解决方案：只有进入消息页时才给body添加此样式document.body.className，离开消息页面移除此样式，进入其余页面不加此样式

第三步：添加对两分钟内的消息才可进行撤回的逻辑判断

这一步没有遇到什么技术问题，计算一下便可

第四步：撤回的文本消息支持从新编辑

这一步也没有遇到什么技术问题，计算一下便可

第五步：img图片添加样式，已去掉移动端长按会出现的默认选项

若是是图片消息，长按会出现默认的菜单，相似于保存图片等，所以要给img添加样式来禁掉

img{
  pointer-events:none
}

可是因为pointer-events:none禁止了一切手指事件，所以须要在外层套一层div来触发点击查看大图事件

第六步：对撤回的消息进行特别处理

例如：我撤回了一条消息，对方撤回了一条消息等，咱们参考了微信的交互。

第七步：当消息被撤回时，要主动修改isRevoked字段为true

咱们调腾讯的TIMsdk的接口获取完消息列表后，是存在redux里面的，所以当有消息被撤回时，要主动修改该消息的isRevoked字段为true，TIMsdk提供了MESSAGE_REVOKED事件用于监听对方消息的撤回。