Javascript-跟踪鼠标位置
我希望每隔几毫秒周期性地跟踪鼠标光标的位置。所以本质上,当一个页面加载时,这个跟踪器应该每100毫秒启动一次,我应该得到posX和posY的新值,并在表单中打印出来 我尝试了下面的代码-但是这些值不会被刷新-只有posX和posY的初始值显示在表单框中。有没有关于如何启动和运行的想法Javascript-跟踪鼠标位置,javascript,Javascript,我希望每隔几毫秒周期性地跟踪鼠标光标的位置。所以本质上,当一个页面加载时,这个跟踪器应该每100毫秒启动一次,我应该得到posX和posY的新值,并在表单中打印出来 我尝试了下面的代码-但是这些值不会被刷新-只有posX和posY的初始值显示在表单框中。有没有关于如何启动和运行的想法 <html> <head> <title> Track Mouse </title> <script type="text/javascript"> fu
<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>
跟踪鼠标
功能鼠标_位置()
{
var e=window.event;
var posX=e.clientX;
var posY=e.clientY;
document.Form1.posx.value=posx;
document.Form1.posy.value=posy;
var t=设置超时(鼠标位置,100);
}
POSX:
波西:
鼠标位置在事件处理程序为mousemove
事件接收的对象上报告,您可以将其附加到窗口(事件气泡):
(请注意,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
}
}
})();
据我所知,如果没有看到事件,你就无法得到鼠标的位置,这似乎证实了这一点
旁注:如果你打算每100毫秒(10次/秒)做一件事,试着让你在该函数中所做的实际处理非常非常有限。对于浏览器来说,这需要做很多工作,尤其是较旧的微软浏览器。是的,在现代计算机上,这看起来并不多,但在浏览器中有很多。。。因此,例如,您可以跟踪您处理的最后一个位置,如果位置没有改变,您可以立即从处理程序中退出。以下是一个基于jQuery和鼠标事件侦听器(这比常规轮询要好得多)的解决方案:
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})
我相信我们想得太多了
功能鼠标位置(e)
{
//做事
}
打开控制台(Ctrl+Shift+J),复制粘贴上面的代码,然后在浏览器窗口上移动鼠标。我认为他只想知道光标的X/Y位置,而不是为什么答案这么复杂
//获取js手中的'Info'div
var info=document.getElementById('info');
//创建告知光标位置的函数
//PageX和PageY将获取位置值并在P中显示它们
函数tellPos(p){
info.innerHTML='Position X:'+p.pageX+'
Position Y:'+p.pageY;
}
addEventListener('mousemove',tellPos,false)代码>
*{
填充:0:
保证金:0;
/*过渡期:0.2秒,全部缓解*/
}
#信息{
位置:绝对位置;
顶部:10px;
右:10px;
背景色:黑色;
颜色:白色;
填充:25px 50px;
}
无论使用哪种浏览器,下面的几行都可以帮助我获取正确的鼠标位置
event.clientX-event.currentTarget.getBoundingClientRect().left
event.clientY-event.currentTarget.getBoundingClientRect().top
基于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));
如果只想直观地跟踪鼠标移动,请参见以下内容:
*{边距:0;填充:0;}
html,正文{宽度:100%;高度:100%;溢出:隐藏;}
变量
canvas=document.querySelector('canvas'),
ctx=canvas.getContext('2d'),
beginPath=false;
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
document.body.addEventListener('mousemove',函数(事件){
var x=event.clientX,y=event.clientY;
如果(beginPath){
ctx.lineTo(x,y);
ctx.stroke();
}否则{
ctx.beginPath();
ctx.moveTo(x,y);
beginPath=true;
}
},假);
以下是两个要求的组合:每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);
}
这会跟踪并作用于鼠标位置,但仅每隔一个周期毫秒一次。我没有足够的声誉来发布评论回复,但我接受了TJ Crowder的建议并完全定义了它。(他把一些细节留给了想象。)
谢谢OP的提问,谢谢TJ的回答!你们俩都帮了大忙。代码作为isbin的镜像嵌入到下面
例子
身体{
高度:3000px;
}
多特先生{
宽度:2倍;
高度:2倍;
背景色:黑色;
位置:绝对位置;
}
(功能(){
“严格使用”;
var mousePos;
document.onmousemove=handleMouseMove;
setInterval(getMousePosition,100);//setInterval每X毫秒重复一次
功能handleMouseMove(事件){
var eventDoc,doc,body;
event=event | | window.event;//IE ism
//如果pageX/Y不可用而clientX/Y可用,
//计算pageX/Y-从jQuery获取的逻辑。
//(这是为了支持旧IE)
if(event.pageX==null&&event.clientX!=null){
eventDoc=(event.target&&event.target.ownerDocument)|文档;
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);
}
鼠标座={
x:event.pageX,
y:event.pageY
};
}
函数getMousePosition(){
var pos=鼠标点;
如果(!pos){
//我们还没有看到任何移动,所以不要添加重复的点
}
否则{
//使用位置x和位置y
//在光标后面添加一个点
var点;
点=document.createElement('div');
dot.className=“dot”;
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));
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);
}
<!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>
<body id="mouse-position" ></body>
document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
console.log("mouse move X: ", e.clientX);
console.log("mouse move X: ", e.screenX);
}, );
$("***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)
})
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;
}