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

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事件用于监听对方消息的撤回。