Execution order of event handlers

D

Dave H

I originally posted a message "Getting the current cursor position
using clientX,clientY" in which I hypothesised that the problem I was
having was related to event handler execution order. I am now
convinced that this is the issue.

In the code posted below, I am attempting to demonstrate the problem.
If you load the code below into IE (the behavior is the same in
Firefox, but the example code is IE specific), then click the first
button, you will see that the coordinates displayed are 0,0. As you
continue down the button list, you will see that each subsequent button
click displays the previous button coordinates.

This behavior clearly demonstrates that the input element onClick
handler is executed before the document.onclick handler.

In order to be able to capture the coordinates of the button currently
being pressed, the event handlers would have to execute in the opposite
order.

My question: is there any way for me to specify the order in which the
onclick handlers execute? If not, is there some other way I can code
this to produce the desired result?

---- code below here ----
<HEAD>
<SCRIPT LANGUAGE="javascript">
document.onclick = saveCursorPos;
cursorX = 0;
cursorY = 0;
function saveCursorPos(e) {
var ev = window.event;
cursorX = ev.clientX;
cursorY = ev.clientY;
document.forms[0].cp.value = cursorY + ',' + cursorX;
}
function clickme () {
alert('Y='+cursorY+',X='+cursorX);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=TEXT NAME="cp" VALUE=""><BR>
<INPUT TYPE=BUTTON VALUE="clickme" onClick="javascript:clickme();"><BR>
<INPUT TYPE=BUTTON VALUE="clickme" onClick="javascript:clickme();"><BR>
<INPUT TYPE=BUTTON VALUE="clickme" onClick="javascript:clickme();"><BR>
<INPUT TYPE=BUTTON VALUE="clickme" onClick="javascript:clickme();"><BR>
</FORM>
</BODY>
---- end of code ----

Thanks,
Dave H.
 
S

Stephen Chalmers

Dave H said:
I originally posted a message "Getting the current cursor position
using clientX,clientY" in which I hypothesised that the problem I was
having was related to event handler execution order. I am now
convinced that this is the issue.

In the code posted below, I am attempting to demonstrate the problem.
If you load the code below into IE (the behavior is the same in
Firefox, but the example code is IE specific), then click the first
button, you will see that the coordinates displayed are 0,0. As you
continue down the button list, you will see that each subsequent button
click displays the previous button coordinates.

This behavior clearly demonstrates that the input element onClick
handler is executed before the document.onclick handler.

In order to be able to capture the coordinates of the button currently
being pressed, the event handlers would have to execute in the opposite
order.

My question: is there any way for me to specify the order in which the
onclick handlers execute? If not, is there some other way I can code
this to produce the desired result?
Click to expand...

You could use the document.onmousemove event instead of onclick.
Alternatively, just call saveCursorPos() from within clickme().
 
F

Fred Oz

Dave said:
I originally posted a message "Getting the current cursor position
using clientX,clientY" in which I hypothesised that the problem I was
having was related to event handler execution order. I am now
convinced that this is the issue.

In the code posted below, I am attempting to demonstrate the problem.
If you load the code below into IE (the behavior is the same in
Firefox, but the example code is IE specific), then click the first
button, you will see that the coordinates displayed are 0,0. As you
continue down the button list, you will see that each subsequent button
click displays the previous button coordinates.

This behavior clearly demonstrates that the input element onClick
handler is executed before the document.onclick handler.
Click to expand...

Read a little more of Peter-Paul's informative site:

In order to be able to capture the coordinates of the button currently
being pressed, the event handlers would have to execute in the opposite
order.

My question: is there any way for me to specify the order in which the
onclick handlers execute? If not, is there some other way I can code
this to produce the desired result?
Click to expand...

Take a look at event bubbling / propagation.
 
Z

Zifud

Dave H wrote:
[...]
My question: is there any way for me to specify the order in which the
onclick handlers execute?
Click to expand...

Yes, if you write your own browser :)
If not, is there some other way I can code
this to produce the desired result?
Click to expand...

Thusly:


<html><head><title>show coords</title>
<script type="text/javascript">

function show_coords(e){
var x = '',
y = '',
used = 'Couldn\'t use either page or client';

if (!e) var e = window.event;
if (e.pageX || e.pageY) {
used = 'Using pageX/Y';
x = e.pageX;
y = e.pageY;
} else if (e.clientX || e.clientY) {
used = 'Using clientX\/Y';
x = e.clientX;
y = e.clientY;
}

var msg = used;
(x != '')? msg += '\nX coord: ' + x : msg ;
(y != '')? msg += '\nY coord: ' + y : msg ;
alert(msg);
}
</script>
</head>
<body>
<form action="">
<input type=text name="cp" value=""><br>
<input type=button value="clickme" onclick="show_coords(event);"><br>
<input type=button value="clickme" onclick="show_coords(event);"><br>
<input type=button value="clickme" onclick="show_coords(event);"><br>
<input type=button value="clickme" onclick="show_coords(event);"><br>
</form>
</body>
</html>

But beware, as Fred's link points out, finding the coords of the cursor
in the "DOM implementation’s client area" is not reliable at all in a
cross-browser sense. The above works in IE and Firefox (and hence
Mozilla and Netscape ? ) so that's about 98% coverage.
 
D

Dave H

Thanks to all who replied. Grabbing the event from within the button
onClick handler worked perfectly for me.

My actual coding requires that I be able to pass arguments in the
button onClick handler. The reason I coded both a document.onclick and
button onclick handlers was because my understanding of the handler
mechanism was that I could either pass no arguments and implicitely
receive the event handle, or that I could explicitely pass my own
arguments. Based on that understanding, I assumed my only option was
to code two handlers: one to capture the event and the other to pass
arguments. Once I experimented a bit with Zif's code, I understood
that I could explicitely pass the event handle along with my other
arguments.

-Dave H.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Problems with using event handlers for button and textarea input 1
Reversing output of user input by using while loop... 2
Help me sort out this script 1
Graph of quadratic function with CanvasRenderingContext2D 2
Song requests 4
HTML event handlers 2
DJForm Login Help! 1
I dont get this. Please help me!! 2

Members online

No members online now.
Total: 57 (members: 1, guests: 56)
Robots: 426

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top