onmousedown event causing body onload event to fire

Bender · Oct 22, 2003

Hi,

I am wanting to capture an onmousedown event without firing the body tags
onload event.

Also, if anyone could explain why this happens that would be excellent. I
can't see how an onmousedown event could bubble up to an onload event.

NOTE: If you put an alert() statement in the onmousedown event handler the
body onload event doesn't get fired.

Example 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>test page</title>
</head>

<body onload="alert('loading page');">
<a href="./page.html" onmousedown="this.style.width = '25%';">test
mouse down</a>
</body>
</html>

Lasse Reichstein Nielsen · Oct 22, 2003

Bender said:
I am wanting to capture an onmousedown event without firing the body tags
onload event.

It never calls the body onload event. The onload event is triggered by
the page being completely loaded. It only happens once, and doesn't
wait for you to click.

Also, if anyone could explain why this happens that would be excellent. I
can't see how an onmousedown event could bubble up to an onload event.

Let me guess: Your example code is saved as the file "page.html"?
In that case, clicking on the a-element will execute the onmousedown event,
and then follow the link and reload the page. That will ofcourse trigger
the onload event on the new page.

To stop the click from following the link, make the onmousedown event
handler return false. That is, add "return false" at the end of the
onmousedown attribute value.

NOTE: If you put an alert() statement in the onmousedown event handler the
body onload event doesn't get fired.

That shouldn't change anything, except maybe make you move the mouse.
Try using the keyboard to get rid of the alert (press return or
escape), and see if it makes a difference.

<a href="./page.html" onmousedown="this.style.width = '25%';">test
mouse down</a>

This test should fail. You try to set the width of an inline element,
which should have no effect at all. The CSS width propert doesn't
apply to inline elements. It will probably work in IE Quirks mode,
but your DOCTYPE should put the browser into standards mode.

Btw, your HTML is not legal. The a-element is an inline element, and
cannot be directly inside the body tag. It needs a paragraph, or
something similar, around it.

/L

Thomas 'PointedEars' Lahn · Oct 22, 2003

Lasse said:
Bender said:

<a href="./page.html" onmousedown="this.style.width = '25%';">test
mouse down</a>

Click to expand...

[...] The CSS width propert doesn't apply to inline elements.

JFTR: The `width' property does not apply to _non-replaced_
inline elements, table rows and row groups. Unfortunately,
the `a' element is in fact a non-replaced inline element.

Btw, your HTML is not legal.

Surely our robot won't be thrown in prison for that markup,
although one should think about it ;-) The markup is not _valid_.

PointedEars

XHTML - how extend/create ELEMENT body in my DTD?	0	Oct 29, 2019
onmouseup isn't always triggered when mouse button is released	11	Aug 26, 2008
Event propagation	7	Oct 17, 2009
Cross-Browser onmousedown JavaScript	13	Jan 22, 2009
is 'this' always defined for functions?	13	Aug 26, 2008
How do I hide the modal after 5 seconds?	4	Jun 1, 2023
IE shows false and Firefox shows true	3	Jul 10, 2009
ValueChanged Event Doesn't Fire	3	Oct 26, 2006

onmousedown event causing body onload event to fire

Bender

Lasse Reichstein Nielsen

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads