解决textarea容器移动与resize事件冲突问题

核心思路是明确区分两种操作的触发范围，通过以下两种方案可以彻底解决冲突：

方案一：添加独立的resize手柄（推荐） #

给容器右下角加一个专属的resize操作区域，只有点击这个区域才触发尺寸调整，容器其他区域负责移动，从根源上隔离两个事件。

实现代码 #

HTML结构

<div class="textarea-container">
  <textarea placeholder="输入内容..."></textarea>
  <div class="resize-handle"></div>
</div>

CSS样式

.textarea-container {
  position: absolute;
  border: 1px solid #ddd;
  padding: 6px;
  cursor: move;
  min-width: 200px;
  min-height: 100px;
}
.textarea-container textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
}
.resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  cursor: se-resize;
}

JavaScript逻辑

const container = document.querySelector('.textarea-container');
const resizeHandle = document.querySelector('.resize-handle');

// 状态标记
let isDragging = false;
let isResizing = false;
// 初始位置/尺寸记录
let startX, startY, startWidth, startHeight;

// 移动事件逻辑
container.addEventListener('mousedown', (e) => {
  // 点击resize手柄时，跳过移动触发
  if (e.target === resizeHandle) return;
  isDragging = true;
  startX = e.clientX - container.offsetLeft;
  startY = e.clientY - container.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  container.style.left = `${e.clientX - startX}px`;
  container.style.top = `${e.clientY - startY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 尺寸调整逻辑
resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  startWidth = container.offsetWidth;
  startHeight = container.offsetHeight;
  startX = e.clientX;
  startY = e.clientY;
  // 阻止事件冒泡，避免触发容器的mousedown
  e.stopPropagation();
});

document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  const newWidth = Math.max(startWidth + (e.clientX - startX), 200);
  const newHeight = Math.max(startHeight + (e.clientY - startY), 100);
  container.style.width = `${newWidth}px`;
  container.style.height = `${newHeight}px`;
});

document.addEventListener('mouseup', () => {
  isResizing = false;
});

方案二：通过鼠标位置判断操作类型 #

如果不想添加额外DOM元素，可以通过判断鼠标是否落在容器右下角的resize触发区（比如15px范围），来区分移动和resize操作。

关键JavaScript修改 #

container.addEventListener('mousedown', (e) => {
  const rect = container.getBoundingClientRect();
  // 判断鼠标是否处于右下角resize区域
  const isInResizeZone = 
    e.clientX > rect.right - 15 && 
    e.clientY > rect.bottom - 15;

  if (isInResizeZone) {
    isResizing = true;
    startWidth = rect.width;
    startHeight = rect.height;
    startX = e.clientX;
    startY = e.clientY;
  } else {
    isDragging = true;
    startX = e.clientX - rect.left;
    startY = e.clientY - rect.top;
  }
});

document.addEventListener('mousemove', (e) => {
  if (isResizing) {
    const newWidth = Math.max(startWidth + (e.clientX - startX), 200);
    const newHeight = Math.max(startHeight + (e.clientY - startY), 100);
    container.style.width = `${newWidth}px`;
    container.style.height = `${newHeight}px`;
  } else if (isDragging) {
    container.style.left = `${e.clientX - startX}px`;
    container.style.top = `${e.clientY - startY}px`;
  }
});

document.addEventListener('mouseup', () => {
  isResizing = false;
  isDragging = false;
});

注意事项 #

• 一定要在resize的mousedown事件中调用e.stopPropagation()，避免触发容器的移动事件监听
• 限制最小宽高可以防止容器被拖到太小影响使用
• 如果需要支持触摸设备，将mouse系列事件替换为pointer事件（pointerdown/pointermove/pointerup）即可，逻辑完全兼容

内容的提问来源于stack exchange，提问作者Rafael MR