diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 342d772..ee6c94e 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -901,14 +901,31 @@ 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 + } // 防止图片被选中 - 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) { @@ -927,11 +944,13 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + if (img) { + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + } // 添加拖拽指示器 const indicator = document.createElement('div') @@ -964,10 +983,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } - - // 阻止页面滚动 - e.preventDefault() }, 300) // 300毫秒长按触发拖拽 + + // 阻止页面滚动 + e.preventDefault() } // 处理触摸移动事件