\"fix: resolve image deletion conflict in RichTextEditor\"

\"通过二次点击机制避免误删,提升用户体验。同时更新了IFLOW.md文档以反映这些更改。\"
This commit is contained in:
yuantao
2025-10-16 18:35:39 +08:00
parent 915fd00268
commit 5858c6c163
2 changed files with 43 additions and 25 deletions

View File

@@ -64,11 +64,19 @@ const eventManager = {
const deleteHandler = function (e) {
e.stopPropagation()
e.preventDefault()
// 添加延时确保不是由短按触发的切换显示操作
setTimeout(() => {
container.remove()
handleInput()
}, 50)
// 检查删除按钮是否可见,只有在可见状态下才能触发删除
if (deleteBtn.classList.contains('visible')) {
// 检查是否是刚显示的按钮点击(通过时间戳判断)
const lastVisibleTime = deleteBtn._lastVisibleTime || 0
const currentTime = Date.now()
// 如果距离上次显示时间超过300ms才执行删除操作
if (currentTime - lastVisibleTime > 300) {
container.remove()
handleInput()
}
}
}
deleteBtn.addEventListener('click', deleteHandler)
@@ -98,25 +106,27 @@ const eventManager = {
touchStartTime = Date.now()
}
const touchEndHandler = function (e) {
const touchDuration = Date.now() - touchStartTime
// 短按小于200ms且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
e.stopPropagation()
// 切换删除按钮的显示状态
if (deleteBtn) {
const isCurrentlyVisible = deleteBtn.classList.contains('visible')
if (isCurrentlyVisible) {
deleteBtn.classList.remove('visible')
} else {
deleteBtn.classList.add('visible')
}
}
}
// 重置删除按钮点击标记
setTimeout(() => {
isDeleteButtonClicked = false
}, 50)
const touchEndHandler = function (e) {
const touchDuration = Date.now() - touchStartTime
// 短按小于200ms且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
e.stopPropagation()
// 切换删除按钮的显示状态
if (deleteBtn) {
const isCurrentlyVisible = deleteBtn.classList.contains('visible')
if (isCurrentlyVisible) {
deleteBtn.classList.remove('visible')
} else {
deleteBtn.classList.add('visible')
// 记录显示时间
deleteBtn._lastVisibleTime = Date.now()
}
}
}
// 重置删除按钮点击标记
setTimeout(() => {
isDeleteButtonClicked = false
}, 50)
}
container.addEventListener('touchstart', touchStartHandler)