onmouseup isn't always triggered when mouse button is released

http://www.frostjedi.com/terra/scrip...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>

yawnmoth wrote:

Quote:

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:

Quote:

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

______________________________________^___________ ___

t

yawnmoth wrote:

Quote:

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

Your forgot a "t".

Quote:

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.

Quote:

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

Quote:

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

Quote:

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
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

On Aug 26, 11:48*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:

Quote:

yawnmothwrote:

Quote:

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

>
Your forgot a "t".

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

Quote:

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.

Quote:

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

Quote:

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

Quote:

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

>

Quote:

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.

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

yawnmoth wrote:

Quote:

Thomas 'PointedEars' Lahn wrote:

Quote:

>yawnmothwrote:

Quote:

>>[...] <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.

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

Quote:

If you had a style tag

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

Quote:

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.

Quote:

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

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

Quote:

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
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

On Aug 26, 4:10*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:

Quote:

If you had a style tag

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

This?:

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

On Aug 26, 11:25*am, Stevo <n...@mail.invalidwrote:

Quote:

yawnmoth wrote:

Quote:

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

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!

yawnmoth wrote:

Quote:

Thomas 'PointedEars' Lahn wrote:

Quote:

>>If you had a style tag

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

>
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.java script&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
<styletag". 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
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

On Aug 26, 11:57*pm, yawnmoth <terra1...@yahoo.comwrote:

Quote:

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

On Aug 26, 9:29*pm, Jorge <jo...@jorgechamorro.comwrote:

Quote:

On Aug 26, 11:57*pm,yawnmoth<terra1...@yahoo.comwrote:
>
>
>

Quote:

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.

>

Quote:

Any ideas as to why?

>

Quote:

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.

That helped - thanks!

Am using document.onmouseup, instead, now.

yawnmoth wrote:

Quote:

Am using document.onmouseup, instead, now.

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

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

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

On Aug 27, 3:21*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:

Quote:

yawnmothwrote:

Quote:

Am using document.onmouseup, instead, now.

>
You should use that only as a fallback for the standards compliant
>
* document.documentElement.addEventListener("mouseup ", ...);

Thanks for the suggestion!

onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

re: onmouseup isn't always triggered when mouse button is released

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about