Detect click on resizable element resizing handle

Question

It is very simple 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>

Run code

Now I would like to determine when the user clicks on the resize item.

Oddly enough, Internet Explorer seems to be the only browser that attaches the event onResizeto elements (except the window). But even if it is implemented in other browsers, this is not exactly what I am looking for, because I need to know when the click size is changed, not changed.

I looked at the attaching listeners to mousedownand checked against currentTargetvs targetto see if they are different. No luck - both return the element itself.

, , , , , . .

?

Answer 1

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>