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

Question

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

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

<div></div>

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

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

我研究了将听众附加到 mousedown 并检查 currentTarget 与 target 以查看它们是否不同。不走运 - 两者都返回元素本身。

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

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

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>