是否有可能获得鼠标位置与JavaScript页面加载后,没有任何鼠标移动事件(不移动鼠标)?
当前回答
重复@超新星的回答,这里有一个使用ES6类的方法,它在你的回调中保持正确的上下文:
class Mouse { constructor() { this.x = 0; this.y = 0; this.callbacks = { mouseenter: [], mousemove: [], }; } get xPos() { return this.x; } get yPos() { return this.y; } get position() { return `${this.x},${this.y}`; } addListener(type, callback) { document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct this.callbacks[type].push(callback); } // `handleEvent` is part of the browser's `EventListener` API. // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent handleEvent(event) { const isMousemove = event.type === 'mousemove'; const isMouseenter = event.type === 'mouseenter'; if (isMousemove || isMouseenter) { this.x = event.pageX; this.y = event.pageY; } this.callbacks[event.type].forEach((callback) => { callback(); }); } } const mouse = new Mouse(); mouse.addListener('mouseenter', () => console.log('mouseenter', mouse.position)); mouse.addListener('mousemove', () => console.log('mousemove A', mouse.position)); mouse.addListener('mousemove', () => console.log('mousemove B', mouse.position));
其他回答
我想我可能有一个合理的解决方案,不用计算div和像素..哈哈
简单地使用动画帧或一个时间间隔的函数。你仍然需要一个鼠标事件一次,虽然只是启动,但技术上你可以把它放在任何你喜欢的地方。
从本质上讲,我们一直在跟踪一个虚拟div,没有鼠标移动。
// create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;
下面是逻辑。
var x,y;
$('body').mousemove(function( e ) {
var x = e.clientX - (window.innerWidth / 2);
var y = e.clientY - (window.innerHeight / 2);
}
function looping (){
/* track my div position 60 x 60 seconds!
with out the mouse after initiation you can still track the dummy div.x & y
mouse doesn't need to move.*/
$('#mydiv').x = x; // css transform x and y to follow
$('#mydiv)'.y = y;
console.log(#mydiv.x etc)
requestAnimationFrame( looping , frame speed here);
}
不是鼠标位置,但是,如果你正在寻找当前光标位置(用例,如获取最后键入的字符等),那么,下面的代码片段工作良好。 这将为您提供与文本内容相关的游标索引。
window.getSelection().getRangeAt(0).startOffset
我设想,也许您有一个带有计时器的父页面,在一定时间或任务完成后,您将用户转发到一个新页面。现在你想要光标的位置,因为它们在等待,所以它们不一定会碰到鼠标。因此,使用标准事件跟踪父页面上的鼠标,并通过get或post变量将最后一个值传递给新页面。
你可以在你的父页上使用JHarding的代码,这样最新的位置总是在全局变量中可用:
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
这将无法帮助通过父页面以外的方式导航到此页面的用户。
var x = 0;
var y = 0;
document.addEventListener('mousemove', onMouseMove, false)
function onMouseMove(e){
x = e.clientX;
y = e.clientY;
}
function getMouseX() {
return x;
}
function getMouseY() {
return y;
}
是的,这是可能的。
如果你在文档中添加"mouseover"事件,它会立即触发,你可以得到鼠标的位置,当然,如果鼠标指针在文档上。
document.addEventListener('mouseover', setInitialMousePos, false);
function setInitialMousePos( event ) {
console.log( event.clientX, event.clientY);
document.removeEventListener('mouseover', setInitialMousePos, false);
}
以前可以通过窗口读取鼠标位置。事件,但现在已弃用。