Javascript - 轨迹鼠标 position
[英]Javascript - Track mouse position
问题描述
我希望每隔 t 毫秒定期跟踪鼠标 cursor 的 position。 所以基本上，当页面加载时 - 这个跟踪器应该启动并且（比如）每 100 毫秒，我应该获取 posX 和 posY 的新值并将其打印在表单中。
我尝试了以下代码 - 但值没有得到刷新 - 只有 posX 和 posY 的初始值显示在表单框中。 关于如何启动和运行它的任何想法？
<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
document.Form1.posx.value = posX;
document.Form1.posy.value = posY;
var t = setTimeout(mouse_position,100);
}
</script>
</head>
<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>
18 个解决方案
解决方案1
215 已采纳 2011-10-17 07:49:15
在mousemove事件的处理程序接收到的event对象上报告鼠标的位置，您可以将其附加到窗口（事件气泡）：
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Use event.pageX / event.pageY here
}
})();
（请注意， if的主体只会在旧的 IE 上运行。）
上面的示例- 当您将鼠标拖到页面上时，它会绘制点。 （在 IE8、IE11、Firefox 30、Chrome 38 上测试。）
如果你真的需要一个基于计时器的解决方案，你可以将它与一些状态变量结合起来：
(function() {
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet
}
else {
// Use pos.x and pos.y
}
}
})();
据我所知，您在没有看到事件的情况下无法获得鼠标位置， 这个对另一个 Stack Overflow 问题的回答似乎证实了这一点。
旁注：如果您打算每 100 毫秒（10 次/秒）做某事，请尽量保持您在该函数中所做的实际处理非常非常有限。 这对浏览器来说是很多工作，尤其是较旧的 Microsoft 浏览器。 是的，在现代计算机上它看起来并不多，但是浏览器中发生了很多事情......因此，例如，您可能会跟踪您处理的最后一个位置并立即从处理程序中退出，如果该位置没有“ t变了。
解决方案2
72 2015-12-18 03:55:58
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
打开您的控制台（ Ctrl + Shift + J ），复制粘贴上面的代码，然后在浏览器窗口上移动鼠标。
解决方案3
67 2011-10-17 07:49:26
这是一个解决方案，基于 jQuery 和主体上的鼠标事件侦听器（远好于常规轮询）：
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})
解决方案4
13 2015-03-20 20:49:19
我相信我们想多了，
function mouse_position(e) { //do stuff }
<body onmousemove="mouse_position(event)"></body>
解决方案5
10 2016-09-14 06:02:34
我认为他只想知道光标的 X/Y 位置而不是为什么答案那么复杂。
// Getting 'Info' div in js hands var info = document.getElementById('info'); // Creating function that will tell the position of cursor // PageX and PageY will getting position values and show them in P function tellPos(p){ info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY; } addEventListener('mousemove', tellPos, false);
* { padding: 0: margin: 0; /*transition: 0.2s all ease;*/ } #info { position: absolute; top: 10px; right: 10px; background-color: black; color: white; padding: 25px 50px; }
<!DOCTYPE html> <html> <body> <div id='info'></div> </body> </html>
解决方案6
8 2022-03-19 03:27:13
如果有人还在寻找答案，
function track(e) {
console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);
将此代码粘贴到控制台中以查看即时操作
解决方案7
7 2017-08-01 11:44:49
基于 ES6 的代码：
let handleMousemove = (event) => {
console.log(`mouse position: ${event.x}:${event.y}`);
};
document.addEventListener('mousemove', handleMousemove);
如果您需要限制鼠标移动，请使用以下命令：
let handleMousemove = (event) => {
console.warn(`${event.x}:${event.y}\n`);
};
let throttle = (func, delay) => {
let prev = Date.now() - delay;
return (...args) => {
let current = Date.now();
if (current - prev >= delay) {
prev = current;
func.apply(null, args);
}
}
};
// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));
这是例子
解决方案8
6 2020-04-11 20:50:53
只是@TJ Crowder和@RegarBoy答案的简化版本。
在我看来，少即是多。
查看onmousemove 事件以获取有关该事件的更多信息。
每次鼠标根据横纵坐标移动时，都会有一个新的posX和posY值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Mouse Tracker</title>
<style>
body {height: 3000px;}
.dot {width: 2px;height: 2px;background-color: black;position: absolute;}
</style>
</head>
<body>
<p>Mouse tracker</p>
<script>
onmousemove = function(e){
//Logging purposes
console.log("mouse location:", e.clientX, e.clientY);
//meat and potatoes of the snippet
var pos = e;
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
</script>
</body>
</html>
解决方案9
5 2019-06-25 18:07:55
如果只想直观地跟踪鼠标移动：
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } </style> <body> <canvas></canvas> <script type="text/javascript"> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), beginPath = false; canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.addEventListener('mousemove', function (event) { var x = event.clientX, y = event.clientY; if (beginPath) { ctx.lineTo(x, y); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(x, y); beginPath = true; } }, false); </script> </body> </html>
解决方案10
2 2017-02-17 08:26:18
无论浏览器如何，以下几行都对我有用以获取正确的鼠标位置。
event.clientX - event.currentTarget.getBoundingClientRect().left event.clientY - event.currentTarget.getBoundingClientRect().top
解决方案11
2 2020-01-28 08:05:39
我没有足够的声誉来发表评论回复，但采用了 TJ Crowder 的出色回答并在 100ms 计时器上完全定义了代码。 （他留下了一些想象的细节。）
感谢 OP 的提问，以及 TJ 的回答！ 你们俩都是一个很大的帮助。 下面嵌入了代码作为 isbin 的镜像。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <style> body { height: 3000px; } .dot { width: 2px; height: 2px; background-color: black; position: absolute; } </style> </head> <body> <script> (function() { "use strict"; var mousePos; document.onmousemove = handleMouseMove; setInterval(getMousePosition, 100); // setInterval repeats every X ms function handleMouseMove(event) { var eventDoc, doc, body; event = event || window.event; // IE-ism // If pageX/Y aren't available and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. // (This is to support old IE) if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerDocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0 ); } mousePos = { x: event.pageX, y: event.pageY }; } function getMousePosition() { var pos = mousePos; if (!pos) { // We haven't seen any movement yet, so don't add a duplicate dot } else { // Use pos.x and pos.y // Add a dot to follow the cursor var dot; dot = document.createElement('div'); dot.className = "dot"; dot.style.left = pos.x + "px"; dot.style.top = pos.y + "px"; document.body.appendChild(dot); } } })(); </script> </body> </html>
解决方案12
1 2021-05-27 08:43:11
这是一个解决方案
document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}
解决方案13
1 2021-06-04 10:37:05
document.addEventListener('mousemove', (event) => { document.getElementById("line").style.top = event.clientY+'px'; document.getElementById("lineY").style.left = event.clientX+'px'; document.getElementById("pos").style.top = (event.clientY -50)+'px'; document.getElementById("pos").style.left = (event.clientX-50)+'px'; }); <style> body { position: relative; height: auto; min-height: 100% !important; background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } .abs{ position:relative; } .lineY { display: flex; position:relative; left:0px; background-color:black; width:2px; height: 100vh; min-height:100% } .line { display: flex; position:relative; background-color:black; min-height:2px; width:100%; } .circle { display: flex; position:absolute; left:0px; top:0px; } </style> <!DOCTYPE html> <html> <head> </head> <body> <div class='line' id="line"></div> <div class='lineY' id="lineY"></div> <svg height="100" width="100" id="pos" class="circle" > <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" /> </svg> </body> </html>
解决方案14
1 2022-05-01 03:22:57
[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
console.table({
"mouse x": event.clientX,
"mouse y": event.clientY
});
}));
解决方案15
0 2019-11-20 10:32:09
这是两个要求的组合：每 100 毫秒跟踪鼠标位置：
var period = 100,
tracking;
window.addEventListener("mousemove", function(e) {
if (!tracking) {
return;
}
console.log("mouse location:", e.clientX, e.clientY)
schedule();
});
schedule();
function schedule() {
tracking = false;
setTimeout(function() {
tracking = true;
}, period);
}
这会跟踪并作用于鼠标位置，但仅限于每周期毫秒。
解决方案16
0 2020-12-17 17:26:50
这是跟踪鼠标位置的最简单方法
html
<body id="mouse-position" ></body>
js
document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
console.log("mouse move X: ", e.clientX);
console.log("mouse move X: ", e.screenX);
}, );
解决方案17
0 2020-12-19 05:32:42
我们最近必须找到当前的 x,y 位置来枚举光标悬停在其上的元素，而与 z-index 无关。 我们最终只是将一个 mousemove 事件侦听器附加到文档中，例如，
function findElements(e) { var els = document.elementsFromPoint(e.clientX, e.clientY); // do cool stuff with els console.log(els); return; } document.addEventListener("mousemove", findElements);
解决方案18
0 2021-05-23 13:39:08
这是获取鼠标指针坐标的最短方法。 只需将您的元素放在光标将悬停的位置，在 $("") 内
$("***enter you element here***").mousemove(function(event)
{
console.clear()
var x = event.originalEvent.screenX;
var y = event.originalEvent.screenY;
console.log("x : "+x)
console.log("y : "+y)
})
如何在 python 中使用 selenium 和 javascript 跟踪鼠标事件和位置？
[英]How to keep track of mouse events and position using selenium and javascript in python?
JavsScript — 跟踪鼠标相对于屏幕中间的位置
[英]JavsScript — Track mouse position relative to the middle of the screen
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.