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
enter image description here
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?
3 Answers 3
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);
};
};
-
\$\begingroup\$ Can you please answer on deprecated api, as mentioned in query? \$\endgroup\$overexchange– overexchange2015年12月17日 06:56:15 +00:00Commented Dec 17, 2015 at 6:56
-
\$\begingroup\$ @overexchange I'd like to but I'm not really aware of the API, sorry. \$\endgroup\$IEatBagels– IEatBagels2015年12月17日 14:02:28 +00:00Commented Dec 17, 2015 at 14:02
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.
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>