View Full Version : onclick handler for complete site

12-28-2007, 11:12 PM
Quick update:

Found out how to write a normal event handler, document.onmousedown was the solution, however I had somehow forgotten to actually pass a parameter which messed up things. I now however have the problem, that two events are triggered, the global click and the image click. Is there a possibility to actually only make one fire?

Thank you


I'm trying to figure out how to make an event handler for a whole page, the situation being the following:

I have a number of different images which all have their event handler which basically sets a variable to the value of the calling ID. So far so good.

Now the "global" mouse click event handler is supposed to read the x and y position of the mouse and for now just output the position clicked (later on I want to reposition the image there, but I'll come to this later on...)

I unfortunatly am struggling to find the appropriate position for the second handler reading the mouse position. Any help or further sources are appreciated!

Thank you

12-29-2007, 01:21 AM
Look into


12-29-2007, 02:44 AM
Thank you for your help so far Eric, unfortunately I have not quite been able to work things out.

I now actually do have a basic insight into what cancelbubble does and in theory have understood what needs to be done. However, unfortunately I am simply to thickheaded to work out the actual code (might be time for bed at 2:45am local time ;))

I have decided, that the most elegant way would be to combine my previously two event-handlers (one for the div elements and one general handler) into a single one. I attached my (simplified) code so far. As can be seen, the problem I really have is that I cannot identify the calling object. Is this just me being stupid? I found a DOM reference for MouseEvent and found the relatedNode/relatedTarget property but it is not filled in my event.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Eventhandler Test</title>

<script type="text/javascript">

var activeDiv = 0;
var x = 0;
var y = 0;

function mouseDownHandler(e) {
if (activeDiv == 0) {
// here I have to find out which Div fired the event (ID is needed), this is were I really struggle

// afterwards if I understand the stuff I read correctly I stop the event from being "bubbled" up
// by doing (for cross browser):
if( e.stopPropagation ) { e.stopPropagation(); }
e.cancelBubble = true;
x = e.pageX;
y = e.pageY;
// here later a function call would come to process activeDiv, x and y furtherly

document.attachEvent('onmousedown', mouseDownHandler, false);

<div id=1 onmousedown='mouseDownHandler' ..........><img/></div>
<div id=2 onmousedown='mouseDownHandler' ..........><img/></div>

Any ideas?

Thank you very much, I appreciate it