\"提交信息: fix: resolve image delete button click issue\"

src/components/RichTextEditor.vue

@@ -60,32 +60,48 @@ const eventManager = {
 
     // 为删除按钮添加点击事件
     if (deleteBtn) {
-      // 添加延时检查，确保删除按钮是可见的才执行删除操作
+      // 保存事件处理函数的引用，以便后续移除
-      setTimeout(() => {
+      const deleteHandler = function (e) {
-        // 保存事件处理函数的引用，以便后续移除
+        e.stopPropagation()
-        const deleteHandler = function (e) {
+        e.preventDefault()
-          e.stopPropagation()
+        // 添加延时确保不是由短按触发的切换显示操作
-          if (deleteBtn.classList.contains('visible')) {
+        setTimeout(() => {
-            container.remove()
+          container.remove()
-            handleInput()
+          handleInput()
-          }
+        }, 50)
-        }
+      }
 
-        deleteBtn.addEventListener('click', deleteHandler)
+      deleteBtn.addEventListener('click', deleteHandler)
-        deleteBtn._deleteHandler = deleteHandler
+      deleteBtn._deleteHandler = deleteHandler
-      }, DELETE_BUTTON_DELAY)
     }
 
     // 为图片容器添加短按事件以显示/隐藏删除按钮
     let touchStartTime = 0
+    let isDeleteButtonClicked = false
+    
+    // 标记删除按钮被点击
+    const markDeleteButtonClicked = function () {
+      isDeleteButtonClicked = true
+      // 重置标记
+      setTimeout(() => {
+        isDeleteButtonClicked = false
+      }, 300)
+    }
+    
+    // 如果删除按钮存在，为其添加标记事件
+    if (deleteBtn) {
+      deleteBtn._markClickHandler = markDeleteButtonClicked
+      deleteBtn.addEventListener('touchstart', markDeleteButtonClicked)
+    }
+
     const touchStartHandler = function (e) {
       touchStartTime = Date.now()
     }
 
     const touchEndHandler = function (e) {
       const touchDuration = Date.now() - touchStartTime
-      // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示
+      // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
-      if (touchDuration < 200 && !dragState.value.isLongPress) {
+      if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
         e.stopPropagation()
         // 切换删除按钮的显示状态
         if (deleteBtn) {
@@ -97,6 +113,10 @@ const eventManager = {
           }
         }
       }
+      // 重置删除按钮点击标记
+      setTimeout(() => {
+        isDeleteButtonClicked = false
+      }, 50)
     }
 
     container.addEventListener('touchstart', touchStartHandler)
@@ -105,6 +125,7 @@ const eventManager = {
     // 保存事件处理函数的引用，以便后续移除
     container._touchStartHandler = touchStartHandler
     container._touchEndHandler = touchEndHandler
+    container._markDeleteButtonClicked = markDeleteButtonClicked
   },
 
   // 移除图片容器的事件监听器
@@ -118,6 +139,7 @@ const eventManager = {
     // 移除短按事件监听器
     const touchStartHandler = container._touchStartHandler
     const touchEndHandler = container._touchEndHandler
+    const markDeleteButtonClicked = container._markDeleteButtonClicked
 
     if (touchStartHandler) {
       container.removeEventListener('touchstart', touchStartHandler)
@@ -129,11 +151,22 @@ const eventManager = {
       delete container._touchEndHandler
     }
     
+    if (markDeleteButtonClicked) {
+      delete container._markDeleteButtonClicked
+    }
+
     // 移除删除按钮事件监听器
     const deleteBtn = container.querySelector('.image-delete-btn')
-    if (deleteBtn && deleteBtn._deleteHandler) {
+    if (deleteBtn) {
-      deleteBtn.removeEventListener('click', deleteBtn._deleteHandler)
+      if (deleteBtn._deleteHandler) {
-      delete deleteBtn._deleteHandler
+        deleteBtn.removeEventListener('click', deleteBtn._deleteHandler)
+        delete deleteBtn._deleteHandler
+      }
+      
+      if (deleteBtn._markClickHandler) {
+        deleteBtn.removeEventListener('touchstart', deleteBtn._markClickHandler)
+        delete deleteBtn._markClickHandler
+      }
     }
   },
 }