\"fix: 修复图片删除按钮显示和拖拽功能冲突问题\"

src/components/RichTextEditor.vue

@@ -809,13 +809,7 @@ const insertImage = () => {
           }
           tempImg.src = imageDataUrl
 
-          // 添加触摸事件监听器实现拖拽功能
+          // 为图片容器添加事件监听器（用于拖拽功能）
-          img.addEventListener('touchstart', handleTouchStart)
-          img.addEventListener('touchmove', handleTouchMove)
-          img.addEventListener('touchend', handleTouchEnd)
-          img.addEventListener('touchcancel', handleTouchCancel)
-          
-          // 为图片容器添加事件监听器
           imgContainer.addEventListener('touchstart', handleTouchStart)
           imgContainer.addEventListener('touchmove', handleTouchMove)
           imgContainer.addEventListener('touchend', handleTouchEnd)
@@ -829,18 +823,7 @@ const insertImage = () => {
           });
           
           // 为图片容器添加触摸事件以显示/隐藏删除按钮
-          imgContainer.addEventListener('touchstart', function(e) {
+          // 注意：这个事件监听器需要在拖拽事件监听器之前添加，以确保正确处理
-            // 防止与拖拽功能冲突
-            if (!dragState.value.isLongPress) {
-              e.stopPropagation();
-              // 切换删除按钮的显示状态
-              if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-                deleteBtn.style.display = 'block';
-              } else {
-                deleteBtn.style.display = 'none';
-              }
-            }
-          });
           
           // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
           imgContainer.addEventListener('click', function(e) {
@@ -946,14 +929,52 @@ const handleKeydown = e => {
 
 // 处理触摸开始事件
 const handleTouchStart = (e) => {
-  const img = e.target
+  // 获取触摸目标
-  if (!img.classList.contains('editor-image')) return
+  const target = e.target
+  
+  // 检查目标是否为图片容器或图片
+  let imgContainer = null
+  let img = null
+  
+  if (target.classList.contains('image-container')) {
+    imgContainer = target
+    img = target.querySelector('.editor-image')
+  } else if (target.classList.contains('editor-image')) {
+    img = target
+    imgContainer = target.parentElement
+  } else {
+    // 如果触摸的不是图片或图片容器，直接返回
+    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'
     img.style.webkitUserSelect = 'none'
     img.style.mozUserSelect = 'none'
     img.style.msUserSelect = 'none'
+  }
   
   // 清除之前的定时器
   if (dragState.value.longPressTimer) {