是否有可能获得鼠标位置与JavaScript页面加载后,没有任何鼠标移动事件(不移动鼠标)?
当前回答
我想我可能有一个合理的解决方案,不用计算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);
}
其他回答
我设想,也许您有一个带有计时器的父页面,在一定时间或任务完成后,您将用户转发到一个新页面。现在你想要光标的位置,因为它们在等待,所以它们不一定会碰到鼠标。因此,使用标准事件跟踪父页面上的鼠标,并通过get或post变量将最后一个值传递给新页面。
你可以在你的父页上使用JHarding的代码,这样最新的位置总是在全局变量中可用:
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
这将无法帮助通过父页面以外的方式导航到此页面的用户。
是的,这是可能的。
如果你在文档中添加"mouseover"事件,它会立即触发,你可以得到鼠标的位置,当然,如果鼠标指针在文档上。
document.addEventListener('mouseover', setInitialMousePos, false);
function setInitialMousePos( event ) {
console.log( event.clientX, event.clientY);
document.removeEventListener('mouseover', setInitialMousePos, false);
}
以前可以通过窗口读取鼠标位置。事件,但现在已弃用。
我实现了一个水平/垂直搜索,(首先让一个div充满垂直排列的竖线链接,然后让一个div充满水平排列的竖线链接,然后简单地看看哪个有悬停状态),就像Tim Down上面的想法,它工作得相当快。遗憾的是,不工作在Chrome 32上的KDE。
jsfiddle.net/5XzeE/4/
编辑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为空。你可以用光标检查用户是否在你的页面上。
重复@超新星的回答,这里有一个使用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));
推荐文章
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔
- TypeScript枚举对象数组
- 在React.js中正确的img路径
- 在React.js中更新组件onScroll的样式
- onClick ReactJS调用多个函数
- 如何在JavaScript中转义单引号(')?
- Ng-repeat结束事件
- 谷歌MAP API未捕获的类型错误:无法读取属性“offsetWidth”为空
- 模糊vs聚焦-有什么真正的区别吗?
- 如何使用JavaScript创建和样式一个div ?
- 清除JavaScript中的缓存