Track mouse coordinates Problem Statement
  Write a JavaScript program that prints the mouse coordinates in a text area when the mouse cursor is moved over the HTML document.
  
  Expected Output
  
  


Solution

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Track mouse coordinates&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div style="background-color:#8F9779;height:30px;"&gt;
        &lt;/div&gt;
        &lt;script type="text/javascript"&gt;
            var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
            if(!mie){
                document.captureEvents(Event.MOUSEMOVE);
            }
            document.onmousemove = mousePos;

            var mouseX = 0;
            var mouseY = 0;

            function mousePos(e){
                if(!mie){
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                }
                else{
                    mouseX = e.clientX + document.body.scrollLeft;
                    mouseY = e.clientY + document.body.scrollRight;
                }

                /*document.write clears the document and all the event handlers inside it*/
                document.body.innerHTML += "X: " + mouseX + ";Y: " + mouseY + ";  Time: " + new Date() + "&lt;br&gt;";    
                return true;
            }
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;




Above code is written using deprecated API captureEvents.MDN says, captureEvents is deprecated. 

Code still works fine with this deprecated API. 

Can this code be improved, by replacing captureEvents with a better standard API?
mie isn't a good variable name. usesIE would be better, or well.. something like that!

Why is mouseX and mouseY defined outside your method's scope? They're useless there.

I don't think keeping variable at the root of the script is a good practice. Why don't you wrap it inside a window.onload call?

The only comment in your code seems useless. You do not use document.write anywhere in your code.

Also, when you have the choice, your conditions should be positive. It's just a little easier to read.

I don't see the use of returning true in a case like that. It means nothing.

Finally, I think that it'd be better to pass the usesIE parameter to the mousePos function. By the way, mousePos should be renamed writeMousePosition.

This is what the final code would look like :

function writeMousePosition(args,usesIE) {
    var mouseX = 0; 
    var mouseY = 0;

    if(usesIE) {
        mouseX = args.clientX + document.body.scrollLeft;
        mouseY = args.clientY + document.body.scrollRight;
    } else {
        mouseX = args.pageX;
        mouseY = args.pageY;
    }

    document.body.innerHTML += "X: " + mouseX + ";Y: " + mouseY + ";  Time: " + new Date() + "&lt;br&gt;";
}

window.onload = function() {
    var usesIE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;

    if(!usesIE) {
        document.captureEvents(Event.MOUSEMOVE);
    }

    document.onmousemove = function(args) {
        writeMousePosition(args, usesIE);
    };
};