diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 177e59b..a74dfea 100644 --- a/src/components/RichTextEditor.vue +++ b/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' + } + // 如果只是简单的点击(非长按),我们不阻止事件继续传播 + // 这样可以允许删除按钮的点击事件正常处理 + } + } // 防止图片被选中 - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' + if (img) { + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' + } // 清除之前的定时器 if (dragState.value.longPressTimer) {