是否有可能获得鼠标位置与JavaScript页面加载后,没有任何鼠标移动事件(不移动鼠标)?
当前回答
是的,这是可能的。
如果你在文档中添加"mouseover"事件,它会立即触发,你可以得到鼠标的位置,当然,如果鼠标指针在文档上。
document.addEventListener('mouseover', setInitialMousePos, false);
function setInitialMousePos( event ) {
console.log( event.clientX, event.clientY);
document.removeEventListener('mouseover', setInitialMousePos, false);
}
以前可以通过窗口读取鼠标位置。事件,但现在已弃用。
其他回答
我设想,也许您有一个带有计时器的父页面,在一定时间或任务完成后,您将用户转发到一个新页面。现在你想要光标的位置,因为它们在等待,所以它们不一定会碰到鼠标。因此,使用标准事件跟踪父页面上的鼠标,并通过get或post变量将最后一个值传递给新页面。
你可以在你的父页上使用JHarding的代码,这样最新的位置总是在全局变量中可用:
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
这将无法帮助通过父页面以外的方式导航到此页面的用户。
编辑2020:这不再工作。看起来是这样,浏览器供应商修补了这个问题。因为大多数浏览器都依赖于chromium,所以它可能位于浏览器的核心。
旧的回答: 您还可以钩子mouseenter(当mousecursor在页面内时,该事件在页面重新加载后触发)。扩展损坏的代码应该做的伎俩:
Var x = null; Var y = null; 文档。addEventListener(' mouemove ', onMouseUpdate, false); 文档。addEventListener('mouseenter', onMouseUpdate, false); 函数onMouseUpdate(e) { x = e.pageX; y = e.pageY; console.log (x, y); } 函数getMouseX() { 返回x; } 函数getMouseY() { 返回y; }
你也可以在mouseleave-event上设置x和y为空。你可以用光标检查用户是否在你的页面上。
最简单的解决方案,但不是100%准确
$(':hover').last().offset()
结果:{上:148,左:62.5} 结果取决于最近的元素大小,当用户切换选项卡时返回undefined
重复@超新星的回答,这里有一个使用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));
是的,这是可能的。
如果你在文档中添加"mouseover"事件,它会立即触发,你可以得到鼠标的位置,当然,如果鼠标指针在文档上。
document.addEventListener('mouseover', setInitialMousePos, false);
function setInitialMousePos( event ) {
console.log( event.clientX, event.clientY);
document.removeEventListener('mouseover', setInitialMousePos, false);
}
以前可以通过窗口读取鼠标位置。事件,但现在已弃用。
推荐文章
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?