Skip to content

Instantly share code, notes, and snippets.

@mkaraki

mkaraki/click-test.html

Created January 11, 2025 18:17
Show Gist options
  • Save mkaraki/8c807a062c5a252c680fcd4a009034dd to your computer and use it in GitHub Desktop.
Save mkaraki/8c807a062c5a252c680fcd4a009034dd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
click-test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Click Test</title>
<style>
div {
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
position: fixed;
}
</style>
</head>
<body>
<h1>Click Test</h1>
<p>Last click: x=<span id="cx">-1</span>, y=<span id="cy">-1</span></p>
<p>Last mouse: x=<span id="mx">-1</span>, y=<span id="my">-1</span></p>
<div id="co" style="background-color: red;"></div>
<div id="mo" style="background-color: blue;"></div>
<script>
document.addEventListener('click', function (e) {
document.getElementById('cx').innerText = e.clientX.toString();
document.getElementById('cy').innerText = e.clientY.toString();
document.getElementById('co').style.left = e.clientX.toString() + 'px';
document.getElementById('co').style.top = e.clientY.toString() + 'px';
});
document.addEventListener('mousemove', function (e) {
document.getElementById('mx').innerText = e.clientX.toString();
document.getElementById('my').innerText = e.clientY.toString();
document.getElementById('mo').style.left = e.clientX.toString() + 'px';
document.getElementById('mo').style.top = e.clientY.toString() + 'px';
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment