单击打开聊天记录消息

server/public/js/chat.js

@@ -88,23 +88,23 @@ function replaceMessage(msgId, newMsg) {
 
 function scrollToBottom() { messagesContainer.scrollTop = messagesContainer.scrollHeight; }
 
-// 图片/气泡双击
+// 图片/气泡单击
 function bindMessageEvents() {
   document.querySelectorAll('.msg-img').forEach(img => {
-    img.removeEventListener('dblclick', onImageDblClick);
-    img.addEventListener('dblclick', onImageDblClick);
+    img.removeEventListener('click', onImageClick);
+    img.addEventListener('click', onImageClick);
   });
   document.querySelectorAll('.msg-bubble').forEach(bubble => {
-    bubble.removeEventListener('dblclick', onBubbleDblClick);
-    bubble.addEventListener('dblclick', onBubbleDblClick);
+    bubble.removeEventListener('click', onBubbleClick);
+    bubble.addEventListener('click', onBubbleClick);
   });
 }
 
-function onImageDblClick(e) {
+function onImageClick(e) {
   e.stopPropagation();
   const overlay = document.createElement('div');
   overlay.className = 'fullscreen-overlay';
-  overlay.innerHTML = `<img src="${e.target.src}" alt="">`;
+  overlay.innerHTML = '<img src="' + e.target.src + '" alt="">';
   overlay.addEventListener('click', () => overlay.remove());
   document.body.appendChild(overlay);
 }
@@ -112,12 +112,25 @@ function onImageDblClick(e) {
 function onImgThumbDblClick(img) {
   const overlay = document.createElement('div');
   overlay.className = 'fullscreen-overlay';
-  overlay.innerHTML = `<img src="${img.src}" style="max-width:100%;max-height:100%;object-fit:contain" alt="">`;
+  overlay.innerHTML = '<img src="' + img.src + '" style="max-width:100%;max-height:100%;object-fit:contain" alt="" id="fs-img">';
   overlay.addEventListener('click', () => overlay.remove());
   document.body.appendChild(overlay);
+  var fsImg = overlay.querySelector('#fs-img');
+  var pressTimer;
+  fsImg.addEventListener('touchstart', function() {
+    pressTimer = setTimeout(function() {
+      var a = document.createElement('a');
+      a.href = fsImg.src;
+      a.download = fsImg.src.split('/').pop().split('?')[0] || 'image.jpg';
+      a.click();
+      clearTimeout(pressTimer);
+    }, 800);
+  });
+  fsImg.addEventListener('touchend', function() { clearTimeout(pressTimer); });
+  fsImg.addEventListener('touchmove', function() { clearTimeout(pressTimer); });
 }
 
-function onBubbleDblClick(e) {
+function onBubbleClick(e) {
   e.stopPropagation();
   const bubble = e.currentTarget;
   const clone = bubble.cloneNode(true);