From 915fd00268e930e5d9f9a9f635790cef9c985935 Mon Sep 17 00:00:00 2001
From: yuantao <yuantao@example.com>
Date: Thu, 16 Oct 2025 18:13:21 +0800
Subject: [PATCH] =?UTF-8?q?\"=E6=8F=90=E4=BA=A4=E4=BF=A1=E6=81=AF:=20fix:?=
 =?UTF-8?q?=20resolve=20image=20delete=20button=20click=20issue\"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RichTextEditor.vue | 69 +++++++++++++++++++++++--------
 1 file changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue
index 8e0130d..ba4fba2 100644
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -60,32 +60,48 @@ const eventManager = {
 
     // 为删除按钮添加点击事件
     if (deleteBtn) {
-      // 添加延时检查，确保删除按钮是可见的才执行删除操作
-      setTimeout(() => {
-        // 保存事件处理函数的引用，以便后续移除
-        const deleteHandler = function (e) {
-          e.stopPropagation()
-          if (deleteBtn.classList.contains('visible')) {
-            container.remove()
-            handleInput()
-          }
-        }
+      // 保存事件处理函数的引用，以便后续移除
+      const deleteHandler = function (e) {
+        e.stopPropagation()
+        e.preventDefault()
+        // 添加延时确保不是由短按触发的切换显示操作
+        setTimeout(() => {
+          container.remove()
+          handleInput()
+        }, 50)
+      }
 
-        deleteBtn.addEventListener('click', deleteHandler)
-        deleteBtn._deleteHandler = deleteHandler
-      }, DELETE_BUTTON_DELAY)
+      deleteBtn.addEventListener('click', deleteHandler)
+      deleteBtn._deleteHandler = deleteHandler
     }
 
     // 为图片容器添加短按事件以显示/隐藏删除按钮
     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）且非长按拖拽状态时切换删除按钮显示
-      if (touchDuration < 200 && !dragState.value.isLongPress) {
+      // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
+      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)
@@ -128,12 +150,23 @@ const eventManager = {
       container.removeEventListener('touchend', touchEndHandler)
       delete container._touchEndHandler
     }
+    
+    if (markDeleteButtonClicked) {
+      delete container._markDeleteButtonClicked
+    }
 
     // 移除删除按钮事件监听器
     const deleteBtn = container.querySelector('.image-delete-btn')
-    if (deleteBtn && deleteBtn._deleteHandler) {
-      deleteBtn.removeEventListener('click', deleteBtn._deleteHandler)
-      delete deleteBtn._deleteHandler
+    if (deleteBtn) {
+      if (deleteBtn._deleteHandler) {
+        deleteBtn.removeEventListener('click', deleteBtn._deleteHandler)
+        delete deleteBtn._deleteHandler
+      }
+      
+      if (deleteBtn._markClickHandler) {
+        deleteBtn.removeEventListener('touchstart', deleteBtn._markClickHandler)
+        delete deleteBtn._markClickHandler
+      }
     }
   },
 }