javascript - 检测点击可调整大小元素的调整大小 handle

Question

使用两行 CSS 使元素可手动调整大小非常容易。像这样:

div {
  resize: both;
  overflow: auto;
  
  /*
  / Styling
  */
  width: 100px;
  height: 100px;
  border: 1px solid #333333;
}

<div></div>

现在我想检测用户何时单击元素的调整大小 handle 。

奇怪的是，Internet Explorer 似乎是唯一将 onResize 事件附加到元素(除了窗口)的浏览器。但即使其他浏览器实现了这一点，它也不是我正在寻找的，因为我需要知道何时单击调整大小 handle ，而不是调整大小。

我研究过将监听器附加到 mousedown 并检查 currentTarget 与 target 以查看它们是否不同。运气不好 - 都返回元素本身。

我最后的，也是最后的，最后的，最后的手段是检查点击位置，看它是否在元素的右下角。但这似乎可笑且不可靠。

是否有可靠的方法来检测元素的调整大小 handle 上的点击或事件？

Answer 1

我检查了这个link并在 resizeobserver

上找到了一个示例

var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
   }
});
ro.observe(testId);

#testId {
  resize: both;
  overflow: auto;
  width: 100px;
  height: 100px;
  border: 1px solid #333333;
}

<div id="testId"></div>