onmouseup isn't always triggered when mouse button is released

yawnmoth · Aug 26, 2008

http://www.frostjedi.com/terra/scripts/demo/onmouseup.html

In Firefox, if I click in the black box and then release, I get a
popup. If I click, drag the cursor, and then release, I don't.
Similarly, if I click and then release outside of the black box, I
don't get a popup, and I don't understand why.

If I comment out "document.getElemenById("demo").onmousedown =
mousedown;", it works. Why would that make a difference?

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>onmousedown / onmouseup</title>
</head>

<body id="body">
<div style="background: black; width: 50px; height: 50px" id="demo"></
div>
<script type="text/javascript">
document.body.onmouseup = mouseup;
document.getElemenById("demo").onmousedown = mousedown;

function mouseup() {
alert("test");
}

function mousedown() {}
</script>
</body>
</html>

Stevo · Aug 26, 2008

yawnmoth said:
If I comment out "document.getElemenById("demo").onmousedown =
mousedown;", it works. Why would that make a difference?

Look very closely at it. If you need a clue:

If I comment out "document.getElemenById("demo").onmousedown =

______________________________________^______________

t

Thomas 'PointedEars' Lahn · Aug 26, 2008

yawnmoth said:
[...]
If I comment out "document.getElemenById("demo").onmousedown =
mousedown;", it works. Why would that make a difference?

Your forgot a "t".

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>onmousedown / onmouseup</title>
</head>

<body id="body">

The ID is unnecessary. Probably someone has told you that before.

<div style="background: black; width: 50px; height: 50px" id="demo">

You should also define the foreground color, and declare everything in the
CSS rule for the `#demo' selector.

<script type="text/javascript">
document.body.onmouseup = mouseup;
document.getElemenById("demo").onmousedown = mousedown;

You should not be mixing proprietary and standards-compliant features (at
least not without feature test).

function mouseup() {
alert("test");
}

function mousedown() {}

Function expressions are widely supported nowadays, it does not appear
necessary to use function declarations here. Especially not when you
use the W3C DOM which AFAIK was not implemented by user agents that only
supported JavaScript versions before 1.2.

PointedEars

yawnmoth · Aug 26, 2008

yawnmothwrote:

[...]
If I comment out "document.getElemenById("demo").onmousedown =
mousedown;", it works. Why would that make a difference?

Click to expand...

Your forgot a "t".

Yup - thanks to both you and Stevo for pointing that out!

The ID is unnecessary. Probably someone has told you that before.

Someone has. Note that I didn't actually reference it with a
getElementById call. I just copy / pasted the HTML (I don't have the
DOCTYPE memorized, for instance) and I guess there was a redundancy I
was unaware of. Kinda like having any id that you don't use - they
could all be deleted if you noticed them.

You should also define the foreground color, and declare everything in the
CSS rule for the `#demo' selector.

I think for a real live production website that's definitely a good
idea. The main point of CSS is to separate content from aesthetics -
to make it so you don't have to edit the HTML to alter the layout.

For a quick little thing like this, though, I'm not sure why it'd
matter? If you had a style tag you could even split the CSS rules for
#demo up into multiple groups which would make it a bit more difficult
for someone to see what you're doing, even though it might be more
concise...

You should not be mixing proprietary and standards-compliant features (at
least not without feature test).

For that matter, it seems like feature tests are probably worth while
for even standards-compliant code? Just because someones browser
supports JavaScript1.3 doesn't mean someone can't come along with a
browser only supporting JavaScript1.2.

Function expressions are widely supported nowadays, it does not appear
necessary to use function declarations here. Especially not when you
use the W3C DOM which AFAIK was not implemented by user agents that only
supported JavaScript versions before 1.2.

I'll have to keep that in mind... thanks!

Thomas 'PointedEars' Lahn · Aug 26, 2008

yawnmoth said:
Thomas said:

yawnmothwrote:

[...] <div style="background: black; width: 50px; height: 50px"
id="demo">

Click to expand...

You should also define the foreground color, and declare everything in
the CSS rule for the `#demo' selector.

Click to expand...

I think for a real live production website that's definitely a good idea.
[...] For a quick little thing like this, though, I'm not sure why it'd
matter?

Decreasing maintenance effort.

If you had a style tag

Given that there is no such thing, what exactly do you consider a `style tag'?

you could even split the CSS rules for #demo up into multiple groups
which would make it a bit more difficult for someone to see what you're
doing, even though it might be more concise...

Your reasoning is flawed. IDs must be unique in a document.

For that matter, it seems like feature tests are probably worth while for
even standards-compliant code?

Yes, DOM standards may not be (fully) supported, and to every implementation
of them there has to be a proprietary beginning.

Just because someones browser supports JavaScript1.3 doesn't mean someone
can't come along with a browser only supporting JavaScript1.2.

You misunderstood. This is not a matter of the programming language, but of
the APIs used with it.

PointedEars

yawnmoth · Aug 26, 2008

Given that there is no such thing, what exactly do you consider a `style tag'?

This?:

http://www.w3schools.com/TAGS/tag_style.asp

yawnmoth · Aug 26, 2008

Look very closely at it. If you need a clue:

> If I comment out "document.getElemenById("demo").onmousedown =
______________________________________^______________

t

I made the change and it's still not working as expected. I add the
't' and get the same behavior as before. The only difference is that
an entry isn't added to the Error Log. And now, if I comment out
document.getElementById("demo"), it doesn't make a difference.
Clicking outside of the box still doesn't do anything.

Any ideas as to why?

Thanks!

Thomas 'PointedEars' Lahn · Aug 27, 2008

yawnmoth said:
This?:

http://www.w3schools.com/TAGS/tag_style.asp

You have just said Jehova[tm]:

<http://groups.google.com/groups?as_q=w3schools.com&as_ugroup=comp.lang.javascript&scoring=d&filter=0>

IOW, you have chosen a poor reference; I don't understand why it is still in
the FAQ, and I strongly recommend you find a better one. Contrary to what
it states, it attempts to describe the HTML `style' element instead, with
its `<style ...>' start tag and and `</style>' end tag, which enclose, of
course, its content.

<http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1>

Although there is surely no shortage of evidence for that there, that your
choice has been a poor one can easily be proven in this instance: this part
of the Web site describes `xml:space' as a "standard attribute" of the "HTML
<style> tag". However, HTML is a application of SGML; an `xml:space'
attribute would require namespace support which only applications of XML can
provide. And in fact, it is an attribute of the *XHTML* (1.0) `style'
element, a completely different animal.

Rest assured that the documentation and example code that you can find there
are equally flawed.

HTH

PointedEars

Jorge · Aug 27, 2008

I made the change and it's still not working as expected. I add the
't' and get the same behavior as before. The only difference is that
an entry isn't added to the Error Log. And now, if I comment out
document.getElementById("demo"), it doesn't make a difference.
Clicking outside of the box still doesn't do anything.

Any ideas as to why?

Thanks!

The body's height happens to be much less than the size on the window
for that .html so that clicking under/below the box isn't cliking into
the body. Click at the right side next to the box... and it works.

--Jorge.

yawnmoth · Aug 27, 2008

The body's height happens to be much less than the size on the window
for that .html so that clicking under/below the box isn't cliking into
the body. Click at the right side next to the box... and it works.

That helped - thanks!

Am using document.onmouseup, instead, now.

Thomas 'PointedEars' Lahn · Aug 27, 2008

yawnmoth said:
Am using document.onmouseup, instead, now.

You should use that only as a fallback for the standards compliant

document.documentElement.addEventListener("mouseup", ...);

PointedEars

yawnmoth · Aug 28, 2008

yawnmothwrote:

You should use that only as a fallback for the standards compliant

document.documentElement.addEventListener("mouseup", ...);

Thanks for the suggestion!

Javascript event 'onmouseup' appears to be broken.	3	Mar 8, 2008
is 'this' always defined for functions?	13	Aug 26, 2008
When draggable=false & draggable=true dont work ?	1	Jan 14, 2023
Centering a button using flexbox	2	Feb 5, 2023
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
How do I hide the modal after 5 seconds?	4	Jun 1, 2023

onmouseup isn't always triggered when mouse button is released

yawnmoth

Stevo

Thomas 'PointedEars' Lahn

yawnmoth

Thomas 'PointedEars' Lahn

yawnmoth

yawnmoth

Thomas 'PointedEars' Lahn

Jorge

yawnmoth

Thomas 'PointedEars' Lahn

yawnmoth

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads