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