J
Joshua Bell
I'm seeing some strange behavior that repros consistently in Firefox 1.5 and
Opera 9 on WinXP. (The equivalent IE-specific code is completely different,
so I'm just worrying about W3C-eventing browsers here.)
This is the core of a fairly standard drag/drop implementation. If you
mouse-down on a DIV it starts listening for events on the document and
reporting the event coordinates. When you mouse-up it stops. Works like a
charm, even if you mouse outside of the browser document window (i.e. into
the toolbar area). (In the sample, drag from the outer part of the red
square or the blue rectangle.)
Now do the same thing but start the whole sequence on either a IMG inside
the original DIV. Everything functions identically except that you stop
getting events when the mouse cursor leaves the bounds of the document
window. If you return to the document window the events resume. (Of course,
you are blisfully unaware of any mouse-ups in the meantime.)
Here's a fairly minimal repro:
<html>
<script>
window.onload = function() {
document.getElementById("foo").addEventListener( 'mousedown', omd,
false );
}
function omd( e ) {
document.addEventListener( 'mouseup', omu, false );
document.addEventListener( 'mousemove', omm, false );
document.getElementById("foo").style.backgroundColor = "blue";
e.preventDefault(); // prevent image dragging default behavior
}
function omu() {
document.removeEventListener( 'mouseup', omu, false );
document.removeEventListener( 'mousemove', omm, false );
document.getElementById("foo").style.backgroundColor = "red";
}
function omm(e) {
document.getElementById("coords").innerHTML = "(" + e.clientX + "," +
e.clientY + ")";
}
</script>
<body>
<div id="coords"> </div>
<div id="foo" style="overflow: hidden; position: absolute; top: 100px;
left: 100px; width: 100px; height: 100px; border: 1px solid black;
background-color: red;">
<img style="position: relative; left: 10px; top: 10px; width: 80px;
height: 40px;" src="http://www.mozilla.com/images/firefox-logo-64x64.png">
<div style="position: relative; left: 10px; top: 10px; width: 80px;
height: 40px; background-color: blue;">
</div>
</body>
</html>
I would write this off as a browser bug (caused by an edge case with the
default behavior of image dragging interfering with the normal mouse events)
but it repros in both Firefox and Opera, so I have a feeling I'm Just
Missing Something about the W3C model here.
I notice this behavior occurs when you drag maps.google.com maps around to
so it's "not just me". Also, if you tweak the sample above so that the
sample inner DIV is position: absolute, the outer (red) DIV starts behaving
differently!
Any thoughts?
Joshua
Opera 9 on WinXP. (The equivalent IE-specific code is completely different,
so I'm just worrying about W3C-eventing browsers here.)
This is the core of a fairly standard drag/drop implementation. If you
mouse-down on a DIV it starts listening for events on the document and
reporting the event coordinates. When you mouse-up it stops. Works like a
charm, even if you mouse outside of the browser document window (i.e. into
the toolbar area). (In the sample, drag from the outer part of the red
square or the blue rectangle.)
Now do the same thing but start the whole sequence on either a IMG inside
the original DIV. Everything functions identically except that you stop
getting events when the mouse cursor leaves the bounds of the document
window. If you return to the document window the events resume. (Of course,
you are blisfully unaware of any mouse-ups in the meantime.)
Here's a fairly minimal repro:
<html>
<script>
window.onload = function() {
document.getElementById("foo").addEventListener( 'mousedown', omd,
false );
}
function omd( e ) {
document.addEventListener( 'mouseup', omu, false );
document.addEventListener( 'mousemove', omm, false );
document.getElementById("foo").style.backgroundColor = "blue";
e.preventDefault(); // prevent image dragging default behavior
}
function omu() {
document.removeEventListener( 'mouseup', omu, false );
document.removeEventListener( 'mousemove', omm, false );
document.getElementById("foo").style.backgroundColor = "red";
}
function omm(e) {
document.getElementById("coords").innerHTML = "(" + e.clientX + "," +
e.clientY + ")";
}
</script>
<body>
<div id="coords"> </div>
<div id="foo" style="overflow: hidden; position: absolute; top: 100px;
left: 100px; width: 100px; height: 100px; border: 1px solid black;
background-color: red;">
<img style="position: relative; left: 10px; top: 10px; width: 80px;
height: 40px;" src="http://www.mozilla.com/images/firefox-logo-64x64.png">
<div style="position: relative; left: 10px; top: 10px; width: 80px;
height: 40px; background-color: blue;">
</div>
</body>
</html>
I would write this off as a browser bug (caused by an edge case with the
default behavior of image dragging interfering with the normal mouse events)
but it repros in both Firefox and Opera, so I have a feeling I'm Just
Missing Something about the W3C model here.
I notice this behavior occurs when you drag maps.google.com maps around to
so it's "not just me". Also, if you tweak the sample above so that the
sample inner DIV is position: absolute, the outer (red) DIV starts behaving
differently!
Any thoughts?
Joshua