Track mouse coordinates

Question

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Track mouse coordinates</title>
    </head>
    <body>
        <div style="background-color:#8F9779;height:30px;">
        </div>
        <script type="text/javascript">
            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() + "<br>";    
                return true;
            }
        </script>
    </body>
</html>

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?

IEatBagels · Accepted Answer · 2015-12-16 14:23:13Z

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

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

Can you please answer on deprecated api, as mentioned in query? — overexchange
– overexchange, Commented Dec 17, 2015 at 6:56
@overexchange I'd like to but I'm not really aware of the API, sorry. — IEatBagels
– IEatBagels, Commented Dec 17, 2015 at 14:02

Community · Accepted Answer · 2020-06-10 13:24:26Z

Repeating redundancy

var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;

You must be from the Department of Redundancy DPT. The above expression is equivalent to:

 var mie = navigator.appName == "Microsoft Internet Explorer";

Add me!

document.onmousemove = function(args) {

It is bad practice to just set the event property in JavaScript. Why? Because you override every other listener that fires on that event.

Instead, you should use addEventListener.

document.addEventListener("mousemove", function(args) {
    ...
});

document.body.innerHTML += "X: " + mouseX + ";Y: " + mouseY + ";  Time: " + new Date() + "<br>";

Yeah, I get that the point of this code is to write the coordinates. However, this is bad practice because you are both computing something and giving output in the same function.

You should have this function return the x and y coordinates instead of that completely necessary true, and have the caller write the output.

Margus · Accepted Answer · 2015-12-17 15:39:30Z

If you can use jquery it is just:

$( "#container" ).mousemove(function( event )

and use the event argumet.

Demo

$( "#container" ).mousemove(function( event ) {
  $( "#container" ).prepend( "X: " + event.pageX + ";Y: " + event.pageY + ";  Time: " + new Date() + "<br>");                
});

#container{
  height:180px;
  width:620px;
  background-color:lightgrey;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container"></div>

Stack Exchange Network

Track mouse coordinates

Solution

3 Answers 3

Repeating redundancy

Add me!

Demo

Your Answer

Hot Network Questions

Track mouse coordinates

Solution

3 Answers 3

Repeating redundancy

Add me!

Demo

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions