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

    
        
        Track mouse coordinates
    
    
        
        
        
            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() + "";    
                return true;
            }
        
    

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() + "";
}

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);
    };
};

StackExchange Code Review Q#114162, answer score: 5