9

It's super easy to make an element manually resizable using two lines of CSS. Like this:

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

Now I'd like to detect when the element's resize handle is clicked by the user.

enter image description here

Oddly, Internet Explorer seems to be the only browser which attaches a onResize event to elements (other than the window). But even if other browsers implemented this, it's not exactly what I'm looking for as I need to know when the resize handle is clicked, not resized.

I've looked into attaching listeners to mousedown and checking the currentTarget vs target to see if they're different. No luck - both return the element itself.

My final, and last, last, last resort, is to inspect the click position to see if it's in the bottom-right corner of the element. But this seems ludicrous and unreliable.

Are there reliable methods for detecting clicks or events on an element's resize handle?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • logically that would be part of the Shadow DOM, and only user created elements (_afaik_) can be open mode. So i doubt you can find a way to access the resizer besides the JS method (_checking mouse position_) you mention. – Gabriele Petrioli Mar 26 '18 at 09:00
  • I resorted to your ludicrous last resort. [This answer](https://stackoverflow.com/a/33378989/673991) gives the top-left click coordinates. Subtracting from offsetWidth, offsetHeight gives the bottom-right coordinates. Those are in the range 0-20 over the resize handle in major browsers. (I was rather desperate to prevent resizing from triggering the click-handler I use to begin contentEditable.) – Bob Stein Jul 26 '19 at 22:36

1 Answers1

2

I checked this link and found an example on 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>
brk
  • 48,835
  • 10
  • 56
  • 78