检测点击可调整大小元素的调整大小手柄

Question

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

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

<div></div>

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

奇怪的是，Internet Explorer似乎是唯一将onResize事件附加到元素（窗口除外）的浏览器。但是，即使其他浏览器实现了此功能，也不是我要查找的内容，因为我需要知道何时单击调整大小手柄，而不是调整大小。

我研究了将侦听器附加到mousedown并检查currentTargetvs，target以查看它们是否不同。没有运气-都返回元素本身。

我的最后也是最后一个不得已的方法是检查单击位置，以查看它是否位于元素的右下角。但是，这似乎很可笑且不可靠。

是否存在用于检测元素的调整大小手柄上的单击或事件的可靠方法？

Answer 1

我检查了此链接并找到了一个示例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>