Detect click on resizable element's resize handle

Question

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.

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?

Answer 1

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>