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