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

Posted 2021-05-03

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

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

<div></div>

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

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

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

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

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

答案

我检查了这个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>

以上是关于检测单击可调整大小元素的调整大小手柄的主要内容，如果未能解决你的问题，请参考以下文章

jQuery UI 可调整大小：单独使用东手柄时的自动高度

如何使用纯 Javascript 使 HTML 元素可调整大小？

如何使用纯 Javascript 使 HTML 元素可调整大小？

SwiftUI：滚动视图中的顶部锚定可调整大小视图

拖动后元素变得随机不可调整大小

拖动后元素变得随机不可调整大小