473,396 Members | 1,666 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

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>
Aug 26 '08 #1
11 3399
yawnmoth wrote:
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
Aug 26 '08 #2
yawnmoth wrote:
[...]
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
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Aug 26 '08 #3
On Aug 26, 11:48*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
yawnmothwrote:
[...]
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!
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.
<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. 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...
<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? Just because someones browser
supports JavaScript1.3 doesn't mean someone can't come along with a
browser only supporting JavaScript1.2.
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.
I'll have to keep that in mind... thanks!
Aug 26 '08 #4
yawnmoth wrote:
Thomas 'PointedEars' Lahn wrote:
>yawnmothwrote:
>>[...] <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.
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.
>><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.
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
Aug 26 '08 #5
On Aug 26, 4:10*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
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
Aug 26 '08 #6
On Aug 26, 11:25*am, Stevo <n...@mail.invalidwrote:
yawnmoth wrote:
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!
Aug 26 '08 #7
yawnmoth wrote:
Thomas 'PointedEars' Lahn wrote:
>>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
Aug 26 '08 #8
On Aug 26, 11:57*pm, yawnmoth <terra1...@yahoo.comwrote:
>
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.
Aug 27 '08 #9
On Aug 26, 9:29*pm, Jorge <jo...@jorgechamorro.comwrote:
On Aug 26, 11:57*pm,yawnmoth<terra1...@yahoo.comwrote:
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.
That helped - thanks!

Am using document.onmouseup, instead, now.
Aug 27 '08 #10
yawnmoth wrote:
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
Aug 27 '08 #11
On Aug 27, 3:21*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
yawnmothwrote:
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!
Aug 28 '08 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Michael Schuerig | last post by:
I'm trying to use the right mouse button to open a popup on a specific element. The popup is triggered by a mouseup event. However, on mousedown the standard context menu opens. To get around this,...
83
by: rahul8143 | last post by:
hello, what is difference between sizeof("abcd") and strlen("abcd")? why both functions gives different output when applied to same string "abcd". I tried following example for that. #include...
0
by: Jim H | last post by:
I'm trying to use an owner draw ListBox by subscribing to the DrawItem event to draw my custom control as an item in the ListBox. This event is triggered when I drag the scroll button but NOT when...
4
by: Dale Levesque | last post by:
I get this message. any ideas?? See the end of this message for details on invoking just-in-time (JIT) debugging instead of this dialog box. ************** Exception Text **************...
4
by: lesperancer | last post by:
I've got a comboBox with 2 choices and based on the choice, I make button A or button B visible if choose choice 1, button A is visible now, I undo the choice so that the comboBox is null, but...
4
by: cb.brite | last post by:
Hello, I have tried this using the MouseEnter/MouseLeave events. However these events do not really refer to the rectangular shape of the form, but the client area (form area minus children...
6
by: marss | last post by:
Hi, How can I define in Firefox whether the left mouse button is pressed when I move mouse over a html element? The documentation says that "e.button == 0 for standard 'click', usually left...
8
by: FAQ server | last post by:
----------------------------------------------------------------------- FAQ Topic - How do I disable the right mouse button? -----------------------------------------------------------------------...
4
by: yawnmoth | last post by:
I'm trying to write a script whereby the body background is changed to back (from white) when the mouse button is held down and kept held down. When you lift it up, I'd like it to change back to...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.