How to get mouse pointer position using JavaScript for Internet Explorer?

Question

I am developing a web page where I have set an image in a <div> dynamically. It works in Firefox but it fails in IE.

The question is: how to get mouse pointer position in IE? I am using the following code for getting mouse pointer position:

function getCursorXY(e) {   
    CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

It works fine with Firefox.

This has ***nothing*** to do with Java. I'd remove the `java` tag for you, but there's a pending edit in the way. — T.J. Crowder, Jun 28 '12 at 13:02
Try this http://expsharing.blogspot.in/2008/08/following-javascript-help-we-get.html — Imdad, Jun 28 '12 at 13:04

JAVAGeek · Answer 1 · 2012-06-28T14:27:20.343

Try this, This should work on all browsers including IE.

<html>
<body>
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>

<script language="JavaScript1.2">
<!--

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

//-->
</script>
</body>
</html>

Why use the ternary operator for detecting document.all? why not use !!document.all? — , Mar 09 '18 at 19:33

score 6 · Answer 2 · answered Jun 28 '12 at 14:42

6

Use jQuery and use event.pageX and event.pageY!

See http://api.jquery.com/event.pageY/

answered Jun 28 '12 at 14:42

Willem Mulder

12,974
3
37
62

score 4 · Answer 3 · edited Jul 01 '12 at 08:52

I solved this problem with this code

    var CurX;
    var CurY;
    var IE = document.all?true:false;
    if(IE){
        CurX = window.event.clientX;
        CurY = window.event.clientY;
    }
    else{
        if (window.captureEvents) {
        document.captureEvents(Event.MOUSEMOVE);
    }
    document.onmousemove = getCursorXY;
}

function getCursorXY(e) {   
    CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

Why don't you change the IE var to notIE as the if(IE) statement will run on everything EXCEPT IE. — , Mar 09 '18 at 19:34

score 0 · Answer 4 · answered Jun 28 '12 at 13:03

Use: clientX and clientY

Like this code:

var posx = 0;
var posy = 0;
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;
}

How to get mouse pointer position using JavaScript for Internet Explorer?

4 Answers4

Linked