如何获得没有事件的鼠标位置(不移动鼠标)?

2020/10/05 09:41 · javascript ·  · 0评论

是否可以在页面加载后使用JavaScript获取鼠标位置而没有任何鼠标移动事件(不移动鼠标)?

真实答案:不,不可能。

好的,我刚刚想到了一种方法。用覆盖整个文档的div覆盖页面。在其中,创建(例如)2,000 x 2,000个<a>元素(这样:hover伪类将在IE 6中运行),每个元素的大小为1像素。:hover为那些<a>更改属性的元素创建CSS规则(比如说font-family)。在您的负载处理程序中,循环浏览这400万个<a>元素中的每一个,检查currentStyle/getComputedStyle()直到找到带有悬停字体的元素从此元素外推以获取文档中的坐标。

注意:不要这样做

编辑2020:不再起作用。浏览器供应商似乎对此进行了修补。由于大多数浏览器都依赖于铬,因此它可能是其核心。

旧答案:您还可以钩住mouseenter(当mousecursor位于页面内部时,在页面重新加载后会触发此事件)。扩展Corrupted的代码应该可以解决问题:

var x = null;
var y = null;
    
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mouseenter', onMouseUpdate, false);
    
function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x, y);
}

function getMouseX() {
  return x;
}

function getMouseY() {
  return y;
}

您还可以在mouseleave-event上将x和y设置为null。因此,您可以使用光标检查用户是否在页面上。

您可以做的是为光标xy坐标创建变量,每当鼠标移动时更新它们,并按一定间隔调用一个函数以使用存储的位置执行所需的操作。

当然,这样做的不利之处是,至少需要鼠标的一次初始移动才能使其正常工作。只要光标至少更新一次其位置,我们就能够找到其位置,而不管其是否再次移动。

var cursor_x = -1;
var cursor_y = -1;
document.onmousemove = function(event)
{
 cursor_x = event.pageX;
 cursor_y = event.pageY;
}
setInterval(check_cursor, 1000);
function check_cursor(){console.log('Cursor at: '+cursor_x+', '+cursor_y);}

前面的代码每秒更新一次,并显示一条有关光标位置的消息。我希望这有帮助。

您可以尝试类似Tim Down建议的方法-但不要在屏幕上为每个像素添加元素,而只需创建2-4个元素(框),然后动态更改其位置,宽度和高度即可在屏幕上划分可能的位置按2-4递归,从而快速找到鼠标的真实位置。

例如-第一个元素占据屏幕的右半部分和左半部分,随后是上半部分和下半部分。到现在为止,我们已经知道鼠标位于屏幕的哪四分之一处,并且能够重复进行-发现该空间的哪四分之一...

如果渲染2,000 x 2,000个<a>元素,则@Tim Down的答案无效

好的,我刚刚想到了一种方法。用覆盖整个文档的div覆盖页面。在其中,创建(说)2,000 x 2,000个元素(以便:hover伪类可在IE 6中运行,请参见),每个元素的大小为1像素。为那些更改属性的元素创建CSS:hover规则(比如说font-family)。在负载处理程序中,循环浏览这400万个元素中的每个元素,检查currentStyle / getComputedStyle(),直到找到带有悬停字体的元素为止。从此元素外推以获取文档中的坐标。

注意:请勿这样做。

但是您不必一次渲染400万个元素,而是使用二进制搜索。只需使用4个<a>元素即可:

  • 步骤1:将整个屏幕视为开始搜索区域
  • 步骤2:将搜寻区域分割成2 x 2 = 4个矩形 <a>元素
  • 步骤3:使用该getComputedStyle()函数确定将鼠标悬停在哪个矩形中
  • 步骤4:将搜索区域缩小到该矩形,然后从步骤2开始重复。

这样,考虑到屏幕的宽度不超过2048像素,您最多需要重复这些步骤11次。

因此,您将生成最多11 x 4 = 44个<a>元素。

如果您不需要确定鼠标的位置精确到一个像素,而是说10px精度就可以了。您最多将重复步骤8次,因此您需要绘制最多8 x 4 = 32个<a>元素。

<a>由于DOM通常很慢,因此生成和销毁元素的效果也不佳。相反,你可以只重用最初4个<a>元素,只是调整自己topleftwidthheight通过步骤你循环。

现在,创建4<a>也是一个过大的杀伤力。相反,您可以在每个矩形中<a>进行测试时重用相同的一个元素getComputedStyle()因此,与其将搜索区域划分为2 x 2个<a>元素,不如<a>通过使用topleft样式属性移动元素来重用单个元素

因此,您只需要单个<a>元素更改其widthheight最大11次,然后更改其topleft最大44次,您将拥有准确的鼠标位置。

最简单的解决方案,但并非100%准确

$(':hover').last().offset()

结果:{top: 148, left: 62.5}

结果取决于最接近的元素大小,并undefined在用户切换选项卡时返回

我设想您可能有一个带有计时器的父页面,并且在一定时间或某个任务完成后,您会将用户转发到新页面。现在您需要光标位置,并且因为它们正在等待,所以它们不一定要触摸鼠标。因此,使用标准事件在父页面上跟踪鼠标,然后将最后一个值通过get或post变量传递给新页面。

您可以在父页面上使用JHarding的代码,以便始终在全局变量中提供最新位置:

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

这将无法帮助通过父页面以外的其他方式导航到该页面的用户。

我实现了水平/垂直搜索(首先使一个div充满水平排列的垂直线链接,然后使一个div充满垂直排列的水平线链接,然后简单地看看哪个具有悬停状态),就像上面的Tim Down的想法一样,并且它的工作速度非常快。遗憾的是,它不适用于KDE上的Chrome 32。

jsfiddle.net/5XzeE/4/

您不必移动鼠标即可获取光标的位置。mousemove以外的其他事件也报告此位置这里以点击事件为例:

document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

嘲笑@SuperNova的答案,这是一种使用ES6类的方法,可this在回调中保留上下文正确:

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));

这是我的解决方案。它导出可以在任何地方使用的window.currentMouseXwindow.currentMouseY属性。它首先使用悬停的元素(如果有)的位置,然后使用鼠标的移动来设置正确的值。

(function () {
    window.currentMouseX = 0;
    window.currentMouseY = 0;

    // Guess the initial mouse position approximately if possible:
    var hoveredElement = document.querySelectorAll(':hover');
    hoveredElement = hoveredElement[hoveredElement.length - 1]; // Get the most specific hovered element

    if (hoveredElement != null) {
        var rect = hoveredElement.getBoundingClientRect();
        // Set the values from hovered element's position
        window.currentMouseX = window.scrollX + rect.x;
        window.currentMouseY = window.scrollY + rect.y;
    }

    // Listen for mouse movements to set the correct values
    document.addEventListener('mousemove', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    });
}())

Composr CMS来源: https : //github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162dc9c35a97618a96748639ff41251R1202

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;
}

我想我可能有一个合理的解决方案,不计算div和pixel..lol

只需使用动画帧或函数的时间间隔。尽管只是要启动一次,您仍然需要一次鼠标事件,但是从技术上讲,您可以将其放置在任意位置。

本质上,我们始终在没有鼠标移动的情况下跟踪虚拟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);
}  
本文地址:http://javascript.askforanswer.com/ruhehuodemeiyoushijiandeshubiaoweizhibuyidongshubiao.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!