关于前端:微信浏览器移动端长按撤回消息

PC 端撤回音讯性能是用右击事件即 contextmenu，挪动端应用长按事件来实现撤回音讯性能，然而 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;
}

第三步：增加对两分钟内的音讯才可进行撤回的逻辑判断

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

第四步：撤回的文本音讯反对从新编辑

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

第五步：img 图片增加款式，已去掉挪动端长按会呈现的默认选项

如果是图片音讯，长按会呈现默认的菜单，相似于保留图片等，因而要给 img 增加款式来禁掉

img{pointer-events:none}

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

第六步：对撤回的音讯进行特地解决

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

第七步：当音讯被撤回时，要被动批改 isRevoked 字段为 true

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