...

View Full Version : onclick handler for complete site



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


[OLD QUESTION
Hello,

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
elimin8tor
]

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

Eric

elimin8tor
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">
<head>
<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;
}
else
{
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);

</script>
</head>
<body>
<div id=1 onmousedown='mouseDownHandler' ..........><img/></div>
<div id=2 onmousedown='mouseDownHandler' ..........><img/></div>
</body>
</html>



Any ideas?

Thank you very much, I appreciate it
elimin8tor



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum