/    Sign up×
Community /Pin to ProfileBookmark

alerting the x,y mouse position

Copy linkTweet thisAlerts:
Feb 15.2007

Hi all, I’m trying to alert the values, but it’s returning an error message.

the error message is: “e is not defined”

heres the code:

[code]
function doSomething(e) {
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
alert(“position x: ” + posX + ” ” + “position y: ” + posY);
}
[/code]

This is a hook to an onmousemove event on the document body.

I’m really lost I know client support is poor I’m currently testing in Firefox, I’m horridly lost.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisFeb 15.2007 — FireFox does not have "window.event". That object is IE only.
<i>
</i>function doSomething(evt) {
var e = (window.event) ? window.event : evt;
var posX = e.clientX;
var posY = e.clientY;
alert("position x: " + posX + " " + "position y: " + posY);
}
if (!window.event)
{document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = doSomething;
Here is a good reference for events: http://www.javascriptkit.com/domref/domevent.shtml
Copy linkTweet thisAlerts:
@gingerjauthorFeb 15.2007 — Thanks gil_davies for alerting me to some of my misguided source. I've amended the script but dug myself in a hole again trying to do "modern" browser sniffing via checking for feature support but it's killed this script.

<i>
</i>function cursorPos(e) {
e = e || window.event;

if (event.clientX) {
var posX = event.clientX;
var posY = event.clientY;
} else if (e.pageX) {
var posX = e.pageX;
var posY = e.pageY; <br/>
}

var getBody = document.getElementsByTagName('body')[0];
var statsDiv = document.getElementById('mouseStats');

statsDiv.innerHTML = 'position x: ' + posX + '&lt;br /&gt;' + 'position y: ' + posY;

getBody.appendChild(statsDiv);
}
document.onmousemove = cursorPos;


Anyone know why this method of browser detection doesn't work. pageX works in firefox until I wrap it in this statement.
Copy linkTweet thisAlerts:
@KorFeb 15.2007 — You must check for the quirk/strict mode of the IE. And you should also compensate for the scroll position of the document, if any:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;

function mouseXY(e){
var X, Y;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
X=ev.pageX+window.pageXOffset;
Y=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
X=ev.clientX+document.documentElement.scrollLeft;
Y=ev.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
X=ev.clientX+document.body.scrollLeft;
Y=ev.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
document.getElementById('mydiv').innerHTML='X= '+X+' Y= '+Y;
}
document.onmousemove=mouseXY
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mydiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@gingerjauthorFeb 15.2007 — Wow that's fab, how did you know about the scroll aspect I've got the DHTML Utopia book on my desk but it doesn't mention that anywhere.

Plus your if (whatever.feature) works, why doens't mine?

Thanks so much though, I'm slowly but surely learning :p
Copy linkTweet thisAlerts:
@KorFeb 15.2007 — Wow that's fab, how did you know about the scroll aspect I've got the DHTML Utopia book on my desk but it doesn't mention that anywhere.
[/QUOTE]
That is why I am a moderator ?

Is hard to learn javascript from books. There are differences between browsers. More than that, no browser follows the standards (ECMAScript and W3 DOM) entirely. Some of the browsers have bugs... The best way to learn javascript is by practice. And by using others experience in Forums like this ?
Copy linkTweet thisAlerts:
@Arty_EffemFeb 15.2007 — 
var ev=(!e)?window.event:e;//IE:Moz

if (ev.pageX){//Moz

X=ev.pageX+window.pageXOffset;

Y=ev.pageY+window.pageYOffset;

}[/QUOTE]pageX and PageY are absolute values, so the page displacement does not need to be added.
Copy linkTweet thisAlerts:
@Arty_EffemFeb 15.2007 — 

Anyone know why this method of browser detection doesn't work.[/QUOTE]It isn't browser detection, it'sobject detection.
[CODE] e = e || window.event;

if (event.clientX) {
[/CODE][/QUOTE]Having assigned the correct value to e, you need to test

its properties, not those of [I]event[/I], which may not be present.
×

Success!

Help @gingerj spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...