[SOLVED] cursor position

jaymc · September 23, 2007

I have a script, everything works fine in IE but in firefox I've narroed the issue down to it not understanding this

divX = event.x;

Im trying to get the cursor position.. how is it done so its compatable accross browsers

Thanks!

shawnyoung · September 24, 2007

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var domType = '';
if (document.all) {
domType = "ie4";
} else if (document.getElementById) {
domType = "std";
} else if (document.layers) {
domType = "ns4";
}
function initMouseMove(){
if(!document.all){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = mouseMove;
}
function mouseMove(e){
var x,y;
if(!document.all){
	fetch_object("txt").value="move";
	x=e.pageX; 
	y=e.pageY;
}else{
	x=document.body.scrollLeft+event.clientX;
	y=document.body.scrollTop+event.clientY; 
}
fetch_object("txt").value=x+":"+y;
}
var objects=new Array();

function fetch_object(idname, forcefetch) {
if (forcefetch || typeof(objects[idname]) == "undefined") {
	switch (domType) {
		case "std": {
			objects[idname] = document.getElementById(idname);
		}
		break;

		case "ie4": {
			objects[idname] = document.all[idname];
		}
		break;

		case "ns4": {
			objects[idname] = document.layers[idname];
		}
		break;
	}
}
return objects[idname];
}
-->
</script>
<title>get mouse position</title>
</head>
<body onload="initMouseMove()">
<input id="txt"/>
</body>
</html>

jaymc · September 24, 2007

Your joking right?

In IE its event.x but in firefox its a page worth of code?

Surely theres an easier way to grab the current cursor position. Thats so much code for so little :|

php_tom · September 24, 2007

This is from http://www.quirksmode.org/js/events_properties.html:

Mouse position

As to the mouse position, the situation is horrible. Although there are no less than six mouse coordinates property pairs, there is no reliable cross–browser way to find the mouse coordinates relative to the document we need.

These are the six property pairs — see also the Event compatibility tables or the W3C DOM Compatibility - Events page.

1. clientX,clientY

2. layerX,layerY

3. offsetX,offsetY

4. pageX,pageY

5. screenX,screenY

6. x,y

I explained the problem, W3C’s vagueness and the use of pageX/Y and clientX/Y in my slightly outdated Evolt article.

The screenX and screenY properties are the only ones that are completely cross–browser compatible. They give the mouse position relative to the entire computer screen of the user. Unfortunately this information is completely useless: you never need to know the mouse position relative to the screen — well, maybe only if you want to place another window at the mouse position.

The other three property pairs are unimportant. See the W3C DOM Compatibility - Events page for a description.

Correct script

This is the correct script for detecting the mouse coordinates:

function doSomething(e) {

var posx = 0;

var posy = 0;

if (!e) var e = window.event;

if (e.pageX || e.pageY) {

posx = e.pageX;

posy = e.pageY;

}

else if (e.clientX || e.clientY) {

posx = e.clientX + document.body.scrollLeft

+ document.documentElement.scrollLeft;

posy = e.clientY + document.body.scrollTop

+ document.documentElement.scrollTop;

}

// posx and posy contain the mouse position relative to the document

// Do something with this information

}

jaymc · September 24, 2007

That doesnt work in firefox? Thats the whole point of the post lol

roopurt18 · September 24, 2007

FF / Netscape / Opera use the DOM L2 event model. Are you passing an event object to your event handler?

jaymc · September 24, 2007

<html>
<head>
<script type="text/javascript">
function doSomething(e) {
   var posx = 0;
   var posy = 0;
   if (!e) var e = window.event;
   if (e.pageX || e.pageY)    {
      posx = e.pageX;
      posy = e.pageY;
   }
   else if (e.clientX || e.clientY)    {
      posx = e.clientX + document.body.scrollLeft
         + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop
         + document.documentElement.scrollTop;
   }
alert(posx);
}
</script>
</head>
<body>
<BR><BR><BR><BR>
<div OnClick="doSomething(document.onclick);">asdasd</div>
</body>
</html>

What I want, is to click on an image and hava the mouse cords ALERTED.

roopurt18 · September 24, 2007

<html>
<head>
<script type="text/javascript">
function doSomething(e) {
   var posx = 0;
   var posy = 0;
   if (!e) var e = window.event;
   if (e.pageX || e.pageY)    {
      posx = e.pageX;
      posy = e.pageY;
   }
   else if (e.clientX || e.clientY)    {
      posx = e.clientX + document.body.scrollLeft
         + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop
         + document.documentElement.scrollTop;
   }
alert(posx + ", " + posy);
}
</script>
</head>
<body>
<BR><BR><BR><BR>
<div id="theDiv">asdasd</div>
<script type="text/javascript">
  var div = document.getElementById("theDiv");
  if(div.addEventListener){
    div.addEventListener("click", doSomething, false);
  }else if(div.attachEvent){
    div.attachEvent("onclick", doSomething);
  }
</script>
</body>
</html>

jaymc · September 24, 2007

How can I also pass some info to doSomething

I want to pass the image URL

roopurt18 · September 24, 2007

Where is the image in relation to the object being clicked on? Or are you attaching the event handler to the image?

jaymc · September 24, 2007

Ok, basically

I have an image, when a user clicks on it they get a larger preview, the cursor position comes into it due to it being previewed where every the mouse cords are, using css position:absolute

When the image is loaded there is a bar with an X, clicking that hides the image..

roopurt18 · September 24, 2007

Ok, so when the event handler is invoked there is an event object. In IE the event object is global (window.event) and in other browsers it is passed to the event handler.

In both cases, the event object will have a property that refers to the object that triggered the event; in your case it will be the image. In IE this property is named srcElement and in other browsers it is named target; you might find this resource helpful:

http://www.javascriptkit.com/domref/domevent.shtml

<html>
<head>
<script type="text/javascript">
function doSomething(e) {
   var posx = 0;
   var posy = 0;
   if (!e) var e = window.event;
   var node = window.event ? e.srcElement : e.target;
   alert(node.src);
   if (e.pageX || e.pageY)    {
      posx = e.pageX;
      posy = e.pageY;
   }
   else if (e.clientX || e.clientY)    {
      posx = e.clientX + document.body.scrollLeft
         + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop
         + document.documentElement.scrollTop;
   }
alert(posx + ", " + posy);
}
</script>
</head>
<body>
<BR><BR><BR><BR>
<img id="theDiv" alt="Logo" src="path/to/image"/>
<script type="text/javascript">
  var div = document.getElementById("theDiv");
  if(div.addEventListener){
    div.addEventListener("click", doSomething, false);
  }else if(div.attachEvent){
    div.attachEvent("onclick", doSomething);
  }
</script>
</body>
</html>

jaymc · September 24, 2007

Ok, its working!

1 last problem though

On the page there are dynamically generated images

At the moment, theres 10 displayed and of course they all have the ID theDiv

Second problem, there thumbnail SRC is not the SRC of the destination image, its actually larger... so a diff URL

Any way to solve these last points?

roopurt18 · September 24, 2007

The id attribute of page elements has to be unique, so you can't have multiple images with the same id. The best way around this is to assign all of the images the same class attribute; then you can grab all of the images on the page, loop over them, and assign the event handler to any that have that class.

<img class="specialImg" alt="blah blah" src="path/to/image"/>
<script type="text/javascript">
  var imgs = document.getElementsByTagName("img");
  var max = imgs.length;
  for( var i = 0; i < max; i++ ){
    var img = imgs[i];
    if(img.className != "specialImg"){ continue; }
    if(img.addEventListener){
      img.addEventListener("click", doSomething, false);
    }else if(img.attachEvent){
      img.attachEvent("onclick", doSomething);
    }
  }

Second problem, there thumbnail SRC is not the SRC of the destination image, its actually larger... so a diff URL

Is there a relationship between the thumbnail src and the regular image src? Usually I name mine the same thing but prepend a th_ onto my thumbnails.

If the img is inside an a tag that points to the image you want to display there is another approach I can help you with.

jaymc · September 24, 2007

Yes there is relationship

thumb = image.php?id=1187944412

large = gallery/imagelarge.php?id=1187944412

How about putting the actually larger image (the href essentually) in a dead element in the img

for example alt="pathtolargeimage"

Obviously not use that, but something along those lines?

jaymc · September 24, 2007

Sorted, I used split()

Thanks for all help mate!!!!!

Sign In

[SOLVED] cursor position

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information