Skip to content

Instantly share code, notes, and snippets.

@kebman

kebman/mousePos1.html

Created August 9, 2018 13:11
Show Gist options
  • Save kebman/de1a8cc738849cdbd1a04eeb4519c070 to your computer and use it in GitHub Desktop.
Save kebman/de1a8cc738849cdbd1a04eeb4519c070 to your computer and use it in GitHub Desktop.
Download ZIP
Short HTML5 + JavaScript that tracks mouse position
Raw
mousePos1.html
<!DOCTYPE html>
<html>
<head>
<title>Track Mouse Position I</title>
<meta charset="utf-8">
<style type="text/css"></style>
</head>
<body>
<header>
<h1>Track Mouse Position I</h1>
</header>
<section>
<article>
<h1>Position Data</h1>
<div id="client"></div>
<div id="screen"></div>
</article>
</section>
<footer></footer>
</body>
</html>
<script type="text/javascript">
const client = document.getElementById("client");
const screen = document.getElementById("screen");
window.addEventListener('mousemove', (e)=>{
let cX = e.clientX, cY = e.clientY;
let sX = e.screenX, sY = e.screenY;
let coords1 = "client - X: " + cX + ", Y coords: " + cY;
let coords2 = "screen - X: " + sX + ", Y coords: " + sY;
client.innerHTML = coords1;
screen.innerHTML = coords2;
}, false);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment