如何在JS中处理textarea调整大小标识的mouseover事件？

方案1：用独立DOM元素作为手柄触发器 #

直接在textarea外层套一个容器，添加一个定位在右下角的DOM元素作为手柄触发器，不影响原生resize功能，同时能精准监听mouseover事件：

<div class="textarea-wrap">
  <textarea></textarea>
  <div class="resize-handle"></div>
</div>

.textarea-wrap {
  position: relative;
  display: inline-block;
}
textarea {
  resize: both;
  padding-right: 16px;
  padding-bottom: 16px;
}
.resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  cursor: se-resize;
  z-index: 1;
  /* 可选：添加半透明背景让手柄可见 */
  background: rgba(0,0,0,0.1);
}

document.querySelector('.resize-handle').addEventListener('mouseover', () => {
  // 这里写鼠标悬停在调整手柄时的逻辑
  console.log('鼠标已悬停在textarea调整手柄上');
});

方案2：优化坐标计算方案 #

如果不想额外加DOM元素，可以通过事件坐标结合textarea的布局参数，精准判断鼠标是否落在右下角手柄区域：

const textarea = document.querySelector('textarea');

textarea.addEventListener('mouseover', (e) => {
  const rect = textarea.getBoundingClientRect();
  const styles = getComputedStyle(textarea);
  // 计算textarea的边框、内边距占用的空间
  const borderRight = parseInt(styles.borderRightWidth);
  const borderBottom = parseInt(styles.borderBottomWidth);
  
  // 浏览器原生resize手柄的大致尺寸
  const handleSize = 15;
  // 计算手柄区域的坐标范围
  const handleMinX = rect.right - handleSize - borderRight;
  const handleMaxX = rect.right - borderRight;
  const handleMinY = rect.bottom - handleSize - borderBottom;
  const handleMaxY = rect.bottom - borderBottom;
  
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  
  if (mouseX >= handleMinX && mouseX <= handleMaxX && mouseY >= handleMinY && mouseY <= handleMaxY) {
    // 触发目标逻辑
    console.log('鼠标悬停在textarea调整手柄上');
  }
});

方案3：结合CSS伪元素与事件委托 #

伪元素无法直接被JS监听，但可以通过事件委托判断鼠标位置是否对应伪元素区域，适合不想加额外DOM的场景：

textarea {
  position: relative;
  resize: both;
}
textarea::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  pointer-events: none; /* 不拦截原生resize事件 */
}

textarea.addEventListener('mouseover', (e) => {
  const rect = textarea.getBoundingClientRect();
  const styles = getComputedStyle(textarea, '::after');
  const handleWidth = parseInt(styles.width);
  const handleHeight = parseInt(styles.height);
  
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  
  if (mouseX >= rect.width - handleWidth && mouseY >= rect.height - handleHeight) {
    console.log('鼠标悬停在textarea调整手柄上');
  }
});

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