微信瀏覽器移動端長按撤回消息

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事件用於監聽對方消息的撤回。