JQuery How To Keep Detecting Textarea Resize When Mouse Goes Out Of Control Area

I have 2 textareas that needs to vertically resize together. However, when mouse goes out of the control area, the function stops working correctly (it doesn't see the mousemove an

Solution 1:

I know this does not answer your title's question, but it should achieve the same goal as your overall question. I would recommend looking at using a mutation observer instead of a mouse move listener. In this example I created a helper function that takes a master and puppet element. It will observe the master for style (including height and width) changes and sets the puppet's width and height

The 6 that I subtract from the width and height seem to be the border + margin + padding of the textbox, you can likely compute that dynamically but for this demo I was only concerned with making them work with default styling.

function syncSize(master, puppet) {
  // Create a temporary callback that uses the puppet and master	
  let sync = function() {
    let width = master.offsetWidth - 6;
    let height = master.offsetHeight - 6;
    puppet.style.width = `${width}px`;
    puppet.style.height = `${height}px`;
  }
  
  // Return a new observer with the callback that listens to the master
  return new MutationObserver(sync).observe(master, {
    attributes: true,
    attributeFilter: ["style"]
  });
}

syncSize(left, right);
syncSize(right, left);

<textarea id="left">Resize me</textarea>
<textarea id="right">I sync</textarea>