Page 1 of 1

Cursor Position.

Posted: Sat Aug 05, 2006 6:21 pm
by JellyFish
How do I get the position of the cursor on my web page using JavaScript? The x and y?

Posted: Sat Aug 05, 2006 6:33 pm
by Weirdan

Code: Select all

window.onmousemove = function(e) {
  e = e || window.event;
  window.status = 'X: ' + e.clientX + ' Y: ' + e.clientY;
}

Posted: Sun Aug 06, 2006 3:10 am
by daedalus__
wow thats neat

Posted: Sun Aug 06, 2006 2:22 pm
by JellyFish
This is good stuff, thank you. But why do you use the or operator in this line:

Code: Select all

e = e || window.event;
I don't understand. You can use the or operator in an if statement and I understand that that is basically making two possible conditions. But with this I don't understand how it works. Why would e not equal e and instead equal window.event? Please explain.

Posted: Sun Aug 06, 2006 3:34 pm
by Chris Corbyn
EasyGoing wrote:This is good stuff, thank you. But why do you use the or operator in this line:

Code: Select all

e = e || window.event;
I don't understand. You can use the or operator in an if statement and I understand that that is basically making two possible conditions. But with this I don't understand how it works. Why would e not equal e and instead equal window.event? Please explain.
The code posted is a very neat and compact version of this (literally expanded):

Code: Select all

function somefunc(e)
{
    if (!e) e = window.event;
    window.status = 'X: ' + e.clientX + ' Y: ' + e.clientY;
}

window.onmousemove = somefunc;
Not all browsers pass the event information to the callback function hence the check for the value of e.

Posted: Sun Aug 06, 2006 4:40 pm
by JellyFish
d11wtq wrote:
EasyGoing wrote:This is good stuff, thank you. But why do you use the or operator in this line:

Code: Select all

e = e || window.event;
I don't understand. You can use the or operator in an if statement and I understand that that is basically making two possible conditions. But with this I don't understand how it works. Why would e not equal e and instead equal window.event? Please explain.
The code posted is a very neat and compact version of this (literally expanded):

Code: Select all

function somefunc(e)
{
    if (!e) e = window.event;
    window.status = 'X: ' + e.clientX + ' Y: ' + e.clientY;
}

window.onmousemove = somefunc;
Not all browsers pass the event information to the callback function hence the check for the value of e.
Okay I understand. But when you say "Not all browsers pass the event information to the callback function hence the check for the value of e." I don't understand. What's the event information and the callback function?

What does it mean when you specify "e" as a parameter in a function? Is this a reserved keyword of somesort? Cause wouldn't you have to write "somefunc(somevalue_for_e)"?

I thank you for all your answers. :)

Posted: Sun Aug 06, 2006 4:43 pm
by feyd
The browser calls the function, not you. Some browsers when calling event hooks pass an event object, others store data into an event object elsewhere which you need to get if you need data from it.

Posted: Sun Aug 06, 2006 5:03 pm
by Weirdan
What's the event information and the callback function?
event information is... well, it's information about the event :). Callback function is a function you create to process some sort of event. You create a function, assign it as an event handler and when the event occurs browser calls the function back (thus the term 'callback').
What does it mean when you specify "e" as a parameter in a function? Is this a reserved keyword of somesort?
No, it's not a reserved word, using 'e' as a parameter name for event handlers is just a tradition.
Cause wouldn't you have to write "somefunc(somevalue_for_e)"?
You wouldn't because browser does that for you :) But not every browser, as d11 pointed out. The-browser-you-don't-like (yeah, I mean IE) do not pass event information as a event handler argument. Instead it populates window.event with that information. So we need to adjust for that.

|| operator in Javascript behaves differently to what you might be accustomed to in languages like C or PHP. While in these languages it returns Boolean value, in Javascript it:
MDC wrote: Returns expr1 if it can be converted to true; otherwise, returns expr2.
So it could be used to specify default argument values (something that Javascript does not allow in a usual way):

Code: Select all

function ExampleFunc(firstParam, secondParam) {
   firstParam = firstParam || 'default value for firstParam';
   secondParam = secondParam || 'default value for secondParam';

   // now both the firstParam & secondParam are guaranteed 
   // to be initialized, even if the function was called like this
   // ExampleFunc('non default value for firstParam'); // note that secondParam was not passed in
}
So, you can read the following snippet

Code: Select all

e = e || window.event;
as: use 'e' argument if it's provided (in standards compliant browsers), otherwise (in IE) use 'window.event'

Posted: Sun Aug 06, 2006 5:31 pm
by JellyFish
Oh I see. It's like this in php:

Code: Select all

function whatever(e = "the default value(in this case window.event).");
Basically setting a default for the e parameter so that you don't have to give it a value. But is this an option:

Code: Select all

function whatever(e = window.event)
{
//then the code in here..
}
???

Posted: Sun Aug 06, 2006 5:32 pm
by feyd
Try it. Find out.

Posted: Sun Aug 06, 2006 5:52 pm
by JellyFish
Meh it didn't work.

Posted: Mon Aug 07, 2006 5:53 am
by Chris Corbyn
EasyGoing wrote:Meh it didn't work.
:) You dont set default values to functions like that in JS ;) Try it on a simple function...

Code: Select all

function mytest(foo='bar')
{
    alert(foo); //No... this causes error
}
But..

Code: Select all

function myTest(foo)
{
    if (foo == null) foo = 'bar';
    alert(foo); //bar
}

Posted: Mon Aug 07, 2006 2:33 pm
by JellyFish
I see. Zhank you.