Why can't you capture the mouse in an iframe?

Question

Update:

This is appears to be a bug in Chrome (and possibly my code) as it works in Firefox

        | top window | iframe   | Google Maps
--------+------------+----------+--------------
Firefox |    Good    |   Good   |    Good
--------+------------+----------+--------------
Chrome  |    Good    |   Bad    |    Bad 
--------+------------+----------+--------------
Safari  |    Good    |   Bad    |    Good  
--------+------------+----------+--------------

Not sure how Google Maps is working around the issue in Safari that the code in the snippet below is not doing.

Bug report to chrome, ignored for over a year. Star to try to get some attention (or post a workaround below?)

Original Question

Is there a concrete reason that browsers can't allow capturing the mouse in an iframe.

Note: By "capture the mouse" I mean specifically when the user clicks (mousedown) on an element and you want to follow the mouse until they let off the mouse.

In a top level window (not an iframe) you can just do this

const elem = document.querySelector('#elem');
const info = document.querySelector('#info');

elem.addEventListener('mousedown', handleMouseDown, true);

function handleMouseDown(e) {
  e.preventDefault();
  e.stopPropagation();
  
  document.addEventListener('mousemove', handleMouseMove, true);
  document.addEventListener('mouseup', removeMouseListeners, true);
  
  info.textContent = `listeners added`;
}

function handleMouseMove(e) {
  e.preventDefault();
  info.textContent = `${e.clientX},${e.clientY}`;
}

function removeMouseListeners(e) {
  document.removeEventListener('mousemove', handleMouseMove, true);
  document.removeEventListener('mouseup', removeMouseListeners, true);
  info.textContent = 'listeners removed';
}

#elem { background: red; padding: 1em; }

click and drag outside window

And it works. Here's a link to a version that's not in an iframe. If you click on the red area and drag outside of element and even outside the window the page will continue to get events which is a good UX. It's how pretty much all native apps work.

Unfortunately as soon as you put that sample in an iframe it no longer works. Run the snippet above, click and drag on the red area, move the mouse outside the frame and the events stop, let off the mouse while outside the frame and then move the mouse back over the frame and notice since the mouseup event was not delivered the element starts getting events even though you're not pressing the mouse button.

My question is, what concrete reason is there for browsers not to fix this behavior? It doesn't seem like there are any security issues are there? It seems no different than when dragging outside the window vs outside the frame. It seems like with use capture = true passed to addEventListener that the browser could just treat the iframe like it does the window and no events would leak to the parent until the capture was released.

Is there some concrete reason browsers can't fix this? It's a horribly user hostile UX to have dragging break on iframes.

Note: if you want to see an example of this breaking embed a google maps iframe and notice you can't keep dragging outside the frame and just like above if the user lets off the mouse outside the frame the maps is stuck to the mouse.

Why can't you capture the mouse in an iframe?

Update:

Original Question

0 Answers