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

Question

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

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

<div></div>

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

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

我已经考虑将听众附加到mousedown并检查currentTarget vs target以查看它们是否不同。没有运气 - 两者都返回元素本身。

我的最后，最后，最后，最后的手段是检查点击位置，看它是否在元素的右下角。但这看起来很荒谬和不可靠。

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

Answer 1

我检查了这个link并在resizeobserver

上找到了一个示例

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;