如何检测可调整大小元素的调整手柄点击事件？

哈哈，确实碰到了个有点 tricky 的问题对吧？毕竟除了IE这个“独苗”，其他主流浏览器都没给元素实现onresize事件，而且就算有，那也不是你要的——你要的是用户点击调整手柄的瞬间，不是元素被拖大拖小的过程对吧？

我给你两个实用的方案，看你是用浏览器原生的resize手柄还是自定义的：

方案一：检测默认原生resize手柄的点击 #

浏览器默认的resize手柄一般在元素右下角，是个看不见但可点击的小区域（大概16px×16px，不同浏览器略有差异）。我们可以通过绑定mousedown事件，计算点击坐标和元素边缘的距离来判断是不是点到了手柄：

// 获取目标可调整元素
const resizableElement = document.querySelector('.resizable');
// 定义手柄的大致尺寸，可根据实际情况调整
const handleThreshold = 16;

resizableElement.addEventListener('mousedown', (event) => {
  // 获取元素的位置和尺寸信息
  const elementRect = resizableElement.getBoundingClientRect();
  
  // 计算点击点到元素右下角的水平、垂直距离
  const distanceToRight = elementRect.right - event.clientX;
  const distanceToBottom = elementRect.bottom - event.clientY;

  // 判断是否点击在手柄区域内
  if (distanceToRight >= 0 && distanceToRight <= handleThreshold 
      && distanceToBottom >= 0 && distanceToBottom <= handleThreshold) {
    console.log('原生调整手柄被点击啦！');
    // 这里写你需要执行的逻辑
  }
});

方案二：自定义手柄（更灵活可控） #

如果觉得原生手柄不好检测，不如直接自定义一个可视化的resize手柄，这样就能直接给它绑定点击事件，逻辑更清晰：

HTML结构 #

<div class="resizable-box">
  <!-- 自定义的调整手柄 -->
  <div class="resize-handle"></div>
</div>

CSS样式 #

.resizable-box {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  /* 禁用原生手柄，避免冲突 */
  resize: none;
  overflow: auto;
}

.resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  background-color: #888;
  border-radius: 2px;
  /* 设置拖拽光标 */
  cursor: se-resize;
}

JavaScript逻辑 #

const customHandle = document.querySelector('.resize-handle');

customHandle.addEventListener('mousedown', () => {
  console.log('自定义调整手柄被点击了！');
  // 后续可以在这里添加拖拽调整尺寸的逻辑，或者你需要的其他操作
});

小补充 #

• 如果需要支持多方向的resize（比如左右、上下），只需要调整坐标判断的逻辑（比如判断点击在元素右边缘中间区域，就是水平resize手柄），或者添加多个自定义手柄；
• 原生手柄的尺寸可以根据测试的浏览器微调handleThreshold的数值，保证检测准确性。

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