\"fix: 重新设计触摸事件处理逻辑，修复删除按钮和拖拽功能\"

src/components/RichTextEditor.vue

@@ -96,9 +96,15 @@ onMounted(() => {
         });
       }
       
-      // 为图片容器添加触摸事件以显示/隐藏删除按钮
+      // 为图片容器添加事件监听器（用于拖拽功能）
-      container.addEventListener('touchstart', function(e) {
+      container.addEventListener('touchstart', handleTouchStart)
-        // 防止与拖拽功能冲突
+      container.addEventListener('touchmove', handleTouchMove)
+      container.addEventListener('touchend', handleTouchEnd)
+      container.addEventListener('touchcancel', handleTouchCancel)
+      
+      // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
+      container.addEventListener('click', function(e) {
+        // 如果当前没有处于拖拽状态，则切换删除按钮显示状态
         if (!dragState.value.isLongPress) {
           e.stopPropagation();
           // 切换删除按钮的显示状态
@@ -111,19 +117,6 @@ onMounted(() => {
           }
         }
       });
-      
-      // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
-      container.addEventListener('click', function(e) {
-        e.stopPropagation();
-        // 切换删除按钮的显示状态
-        if (deleteBtn) {
-          if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-            deleteBtn.style.display = 'block';
-          } else {
-            deleteBtn.style.display = 'none';
-          }
-        }
-      });
     })
   }, 0)
 })
@@ -809,12 +802,6 @@ const insertImage = () => {
           }
           tempImg.src = imageDataUrl
 
-          // 为图片容器添加事件监听器（用于拖拽功能）
-          imgContainer.addEventListener('touchstart', handleTouchStart)
-          imgContainer.addEventListener('touchmove', handleTouchMove)
-          imgContainer.addEventListener('touchend', handleTouchEnd)
-          imgContainer.addEventListener('touchcancel', handleTouchCancel)
-          
           // 为删除按钮添加点击事件
           deleteBtn.addEventListener('click', function(e) {
             e.stopPropagation();
@@ -822,17 +809,23 @@ const insertImage = () => {
             handleInput();
           });
           
-          // 为图片容器添加触摸事件以显示/隐藏删除按钮
+          // 为图片容器添加事件监听器（用于拖拽功能和删除按钮切换）
-          // 注意：这个事件监听器需要在拖拽事件监听器之前添加，以确保正确处理
+          imgContainer.addEventListener('touchstart', handleTouchStart)
+          imgContainer.addEventListener('touchmove', handleTouchMove)
+          imgContainer.addEventListener('touchend', handleTouchEnd)
+          imgContainer.addEventListener('touchcancel', handleTouchCancel)
           
           // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
           imgContainer.addEventListener('click', function(e) {
-            e.stopPropagation();
+            // 如果当前没有处于拖拽状态，则切换删除按钮显示状态
-            // 切换删除按钮的显示状态
+            if (!dragState.value.isLongPress) {
-            if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+              e.stopPropagation();
-              deleteBtn.style.display = 'block';
+              // 切换删除按钮的显示状态
-            } else {
+              if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-              deleteBtn.style.display = 'none';
+                deleteBtn.style.display = 'block';
+              } else {
+                deleteBtn.style.display = 'none';
+              }
             }
           });
           
@@ -932,6 +925,12 @@ const handleTouchStart = (e) => {
   // 获取触摸目标
   const target = e.target
   
+  // 检查是否触摸的是删除按钮
+  if (target.classList.contains('image-delete-btn')) {
+    // 如果是删除按钮，让事件正常处理
+    return
+  }
+  
   // 检查目标是否为图片容器或图片
   let imgContainer = null
   let img = null
@@ -947,27 +946,6 @@ const handleTouchStart = (e) => {
     return
   }
   
-  // 检查是否触摸的是删除按钮
-  if (target.classList.contains('image-delete-btn')) {
-    // 如果是删除按钮，让事件正常处理
-    return
-  }
-  
-  // 如果当前没有处于长按拖拽状态，切换删除按钮的显示状态
-  if (!dragState.value.isLongPress) {
-    const deleteBtn = imgContainer.querySelector('.image-delete-btn')
-    if (deleteBtn) {
-      // 切换删除按钮的显示状态
-      if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-        deleteBtn.style.display = 'block'
-      } else {
-        deleteBtn.style.display = 'none'
-      }
-      // 如果只是简单的点击（非长按），我们不阻止事件继续传播
-      // 这样可以允许删除按钮的点击事件正常处理
-    }
-  }
-  
   // 防止图片被选中
   if (img) {
     img.style.userSelect = 'none'
@@ -993,11 +971,13 @@ const handleTouchStart = (e) => {
     dragState.value.currentY = e.touches[0].clientY
     
     // 添加拖拽样式
-    img.classList.add('dragging')
+    if (img) {
-    img.style.opacity = '0.9'
+      img.classList.add('dragging')
-    img.style.transform = 'scale(0.98)'
+      img.style.opacity = '0.9'
-    img.style.zIndex = '999'
+      img.style.transform = 'scale(0.98)'
-    img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+      img.style.zIndex = '999'
+      img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+    }
     
     // 添加拖拽指示器
     const indicator = document.createElement('div')
@@ -1590,9 +1570,15 @@ defineExpose({
               });
             }
             
-            // 为图片容器添加触摸事件以显示/隐藏删除按钮
+            // 为图片容器添加事件监听器（用于拖拽功能）
-            container.addEventListener('touchstart', function(e) {
+            container.addEventListener('touchstart', handleTouchStart)
-              // 防止与拖拽功能冲突
+            container.addEventListener('touchmove', handleTouchMove)
+            container.addEventListener('touchend', handleTouchEnd)
+            container.addEventListener('touchcancel', handleTouchCancel)
+            
+            // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
+            container.addEventListener('click', function(e) {
+              // 如果当前没有处于拖拽状态，则切换删除按钮显示状态
               if (!dragState.value.isLongPress) {
                 e.stopPropagation();
                 // 切换删除按钮的显示状态
@@ -1605,19 +1591,6 @@ defineExpose({
                 }
               }
             });
-            
-            // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
-            container.addEventListener('click', function(e) {
-              e.stopPropagation();
-              // 切换删除按钮的显示状态
-              if (deleteBtn) {
-                if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-                  deleteBtn.style.display = 'block';
-                } else {
-                  deleteBtn.style.display = 'none';
-                }
-              }
-            });
           })
         }, 0)
       } catch (error) {