Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Capture Mouse Positions at Intervals in JavaScript
In this article, we will demonstrate how to capture the mouse position in JavaScript at regular intervals and log or use this data for various purposes. Capturing mouse positions after every given interval refers to a program or functionality where the current position of the mouse pointer is tracked at regular time intervals. This can be useful in scenarios like debugging, interactive applications, or visualizing user movement on a web page.
Use Cases
Imagine you want to monitor user activity on a web page and record the mouse position every second. This can be useful for:
-
Analytics: Tracking how users navigate or interact with different page areas.
-
Games and Simulations: Capturing user input for animations or gameplay.
- Heatmaps: Visualizing user behavior on a webpage.
Capturing mouse positions after every given interval
JavaScript provides tools like the mousemove event to capture real-time mouse movements. Combining this with setInterval allows you to log the mouse position at specified intervals. JavaScript provides tools like the mousemove event to capture real-time mouse movements. Combining this with setInterval allows you to log the mouse position at specified intervals.
The mousemove event is used to detect when the mouse pointer moves within the webpage.
document.addEventListener('mousemove', (event)
The event listener attached to mousemove captures the mouse's current position (clientX and clientY) in real-time.
mouseX = event.clientX; // Get the X-coordinate
mouseY = event.clientY; // Get the Y-coordinate
This position is then used to dynamically update the positionBox on the screen and log the coordinates to the console every second.
const positionBox = document.createElement('div');
positionBox.id = 'positionBox';
positionBox.textContent = 'Mouse Position: X=0, Y=0';
Example
To capture mouse positions after every given interval, the code is as follows. Following is the code for capturing the mouse position ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Capture mouse position after every given interval</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to start capturing mouse position every 3 seconds</h3>
<script>
let resultEle = document.querySelector(".result");
let check;
let xCoord, yCoord;
document.body.addEventListener("mousemove", function (event) {
xCoord = event.clientX;
yCoord = event.clientY;
});
function displayCoordinate(element) {
resultEle.innerHTML =
"X coordinate = " + xCoord + "<br> Y coordinate = " + yCoord;
}
document.querySelector(".Btn").addEventListener("click", () => {
setInterval(displayCoordinate, 3000);
});
</script>
</body>
</html>
You can adjust the interval in setInterval to capture positions more or less frequently.
Every 500ms:
setInterval(() => {
console.log(`Mouse Position: X=${mouseX}, Y=${mouseY}`);
}, 500);
Output
On clicking the "CLICK HERE" button the mouse position will be captured every 3 seconds ?
Conclusion
By combining JavaScript's mousemove event and setInterval, you can easily track and capture mouse positions at specified intervals. Whether for analytics, games, or interactive web experiences, this approach is flexible and easy to implement. Try it out on your next project to gain insights into user interactions!
235 Views
