L
linderd
Hi,
I've just started developing with Javascript, but I've come across
what appears to be a fairly fundamental problem: the 'onmouseup' event
listener is completely unreliable.
Now, I may be mistaken, or simply stupid, but this seems utterly
ridiculous for mature programming language. If anyone would tell to
explain what I'm doing wrong, or simply acknowledge that its a known
issue, I'd be most obliged.
Summary:
'mouseUp' event does not fire if there is a 'drag' after the
'mouseDown' event.
Confirmed on:
Firefox 2.0.0.8 (Linux)
Firefox 2.0.0.12 (Windows)
IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158 (Windows)
Demonstration code:
<html>
<head>
<title>
Test
</title>
</head>
<body>
<div id="test" style="width: 100px; height: 100px; background-
color: #cfffff"/>
<script>
function onMouseUp (event) {
var fp = document.getElementById ("test");
fp.style.backgroundColor = "#cfffff";
}
function onMouseDown (event) {
var fp = document.getElementById ("test");
fp.style.backgroundColor = "#ff0000";
}
function init () {
var fp = document.getElementById ("test");
fp.onmouseup = onMouseUp;
fp.onmousedown = onMouseDown;
}
init ();
</script>
</body>
</html>
Detail:
If you click on the blue square and then release the mouse the
'mouseUp', 'mouseDown' events correctly fire.
However, if you click on the blue square, hold down the mouse and drag
it to a distance position on the page and release it, the square
remains red. The 'onMouseUp' event never fires.
Notes:
There are a few complaints about this on various forums, largely to do
with 'drag and drop' functionality. One suggestion/explanation appears
to be that dragging the cursor triggers some kind of drag and drop
behavior from the browser and calling 'event.stopPropagation()'
prevents this. It doesn't.
So... anyone?
Cheers,
D.
I've just started developing with Javascript, but I've come across
what appears to be a fairly fundamental problem: the 'onmouseup' event
listener is completely unreliable.
Now, I may be mistaken, or simply stupid, but this seems utterly
ridiculous for mature programming language. If anyone would tell to
explain what I'm doing wrong, or simply acknowledge that its a known
issue, I'd be most obliged.
Summary:
'mouseUp' event does not fire if there is a 'drag' after the
'mouseDown' event.
Confirmed on:
Firefox 2.0.0.8 (Linux)
Firefox 2.0.0.12 (Windows)
IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158 (Windows)
Demonstration code:
<html>
<head>
<title>
Test
</title>
</head>
<body>
<div id="test" style="width: 100px; height: 100px; background-
color: #cfffff"/>
<script>
function onMouseUp (event) {
var fp = document.getElementById ("test");
fp.style.backgroundColor = "#cfffff";
}
function onMouseDown (event) {
var fp = document.getElementById ("test");
fp.style.backgroundColor = "#ff0000";
}
function init () {
var fp = document.getElementById ("test");
fp.onmouseup = onMouseUp;
fp.onmousedown = onMouseDown;
}
init ();
</script>
</body>
</html>
Detail:
If you click on the blue square and then release the mouse the
'mouseUp', 'mouseDown' events correctly fire.
However, if you click on the blue square, hold down the mouse and drag
it to a distance position on the page and release it, the square
remains red. The 'onMouseUp' event never fires.
Notes:
There are a few complaints about this on various forums, largely to do
with 'drag and drop' functionality. One suggestion/explanation appears
to be that dragging the cursor triggers some kind of drag and drop
behavior from the browser and calling 'event.stopPropagation()'
prevents this. It doesn't.
So... anyone?
Cheers,
D.