Javascript event 'onmouseup' appears to be broken.

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.
 
E

Evertjan.

linderd wrote on 08 mrt 2008 in comp.lang.javascript:
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.

Why do you think it should?

The mouseup specifically is not on that element.

Methinks the way you describe it is the logical one,
and is the basis of useful dragging/releasing code.
 
L

linderd

linderd wrote on 08 mrt 2008 in comp.lang.javascript:



Why do you think it should?

The mouseup specifically is not on that element.

Methinks the way you describe it is the logical one,
and is the basis of useful dragging/releasing code.

Ah... Thank you.

It seems I was under the mistaken impression that focus was
retained by an element if the cursor didn't move over another
DOM Element (or rather that document.body wouldn't take the
focus away).

Still, for anyone else with a similar problem, the solution is
obvious enough:
<html>
<head>
<title>
Test
</title>
</head>
<body>
<div id="parent" style="width: 100%; height: 100%;">
<div id="test" style="width: 100px; height: 100px;
background-color: #cfffff"/>
</div>
<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 ("parent");
fp.onmouseup = onMouseUp;

var fp = document.getElementById ("test");
fp.onmousedown = onMouseDown;
}

init ();
</script>
</body>
</html>

cheers,
D.
 
T

Thomas 'PointedEars' Lahn

linderd said:
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.

You are mistaken. For starters, a DOM is an API, it is not part of the
J(ava)Script 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.

The correct answer has been given already. I suggest you be slower to
judge, and to attribute your mistakes to everyone else, in the future.
That will help greatly in actually learning your stuff.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top