473,320 Members | 1,863 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,320 software developers and data experts.

Execution order of event handlers

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.

Jul 23 '05 #1
4 2506

Dave H <dh@cyberpipe.net> wrote in message
news:11**********************@c13g2000cwb.googlegr oups.com...
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?


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

--
S.C.
Jul 23 '05 #2
Dave H wrote:
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.
Read a little more of Peter-Paul's informative site:

<URL:http://www.quirksmode.org/js/events_order.html>

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?


Take a look at event bubbling / propagation.

--
Fred
Jul 23 '05 #3
Dave H wrote:
[...]
My question: is there any way for me to specify the order in which the
onclick handlers execute?
Yes, if you write your own browser :-)
If not, is there some other way I can code
this to produce the desired result?


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.

--
Zif
Jul 23 '05 #4
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.

Jul 23 '05 #5

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

Similar topics

13
by: z. f. | last post by:
Hi, i have a class that is derived from System.Web.UI.Page, and this is the class i use in my application as PageBase. all other page classes are deriverd from my PageBase instead of the...
23
by: roman | last post by:
Hi, I would like to have two actions for one event. But I want the second action to trigger when the first one action completes. Is it possible to do this in javascript? I'm using the onclick...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

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.