有没有办法触发 mousemove 并获取 event.pageX、event.pageY？

Posted 2023-02-19

【中文标题】有没有办法触发 mousemove 并获取 event.pageX、event.pageY？

【英文标题】：Is there a way to trigger mousemove and get event.pageX, event.pageY?

【发布时间】：2011-12-08 00:05:40

【问题描述】：

那么，就像问题所指出的那样，有没有办法在 jQuery 中触发 mousemove 事件，该事件还将鼠标坐标发送到事件对象？

到目前为止，我的代码可以使用 .trigger(event) 函数触发 mousemove，但 event.pageX 和 event.pageY 未定义。

【问题讨论】：

一旦你可以做的就是保存最后一个真正的 mousemove 事件的事件数据，然后当你触发它时，如果不存在新的事件数据，则以编程方式重用它。如果没有触发真正的 mousemove 事件，则意味着鼠标没有移动，因此最后一次真正的 mousemove 中的 eventData 应该仍然具有当前位置。

【参考方案1】：

需要在触发事件前直接设置pageX和pageY。要设置这些属性，请创建一个 jQuery.Event 对象。

// create a jQuery event
e = $.Event('mousemove');

// set coordinates
e.pageX = 100;
e.pageY = 100;

// trigger event - must trigger on document
$(document).trigger(e);

See it in jsFiddle.

【讨论】：

这不起作用，因为 jQuery 在调用 trigger 时会忽略 pageX 和 pageY 参数。

是什么让你得出这个结论？查看this jsfiddle。

我同意，这种方法对我来说是最好的，很容易自己定义事件，只需自己更改 pageX/pageY 道具

【参考方案2】：

我不相信可以通过 javascript / jQuery 按需获取鼠标坐标；但是，如果您将位置绑定到全局变量，则可以在整个文档中随时访问它们，如下所示：

$(document).ready(function()
   $().mousemove(function(e)
      window.xPos = e.pageX;
      window.yPos = e.pageY;
   ); 
);

对于 CPU 密集度较低的选项，您可以添加超时，但您可以用性能换取知道鼠标位置的轻微延迟：

function getMousePosition(timeoutMilliSeconds) 
    $(document).one("mousemove", function (event) 
        window.xPos = event.pageX;
        window.yPos = event.pageY;
        setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds);
    );

getMousePosition(100);

您现在应该能够使用任一解决方案从文档中的任何位置访问 window.xPos 和 window.yPos，而无需触发虚假事件。

【讨论】：

-1 这并没有解决问题，它涉及手动触发的事件。

我知道如何通过在对象上绑定 mousemove 来获取鼠标的坐标。但是说鼠标不动，但是我想用jQuery中的trigger函数来触发一个虚拟的mousemove，仍然得到坐标。

@geossj5 - 如果您已经在跟踪鼠标，并且鼠标不再移动，那么无论最后记录的坐标是什么，情况肯定仍然如此......？

@JamesAllardice - 是的，这就是我现在所拥有的，但我认为会有一种更高效且 CPU 密集度更低的方式。不过，感谢您的洞察力。

【参考方案3】：

我不确定我是否完全理解这个问题。你可以这样做：

$('.someClass').mousemove(function(event)
    console.log(event.pageX);
    console.log(event.pageY);
);

现在，每当鼠标移到someClass 上时，它都会注册 xy 坐标。这是jsfiddle 来查看它的实际效果和jquery documentation。

【讨论】：

我知道如何通过在元素上绑定 mousemove 来获取鼠标的坐标。但是说鼠标不动，但是我想用jQuery中的trigger函数来触发一个虚拟的mousemove，仍然得到坐标。

你是如何用 Javascript 移动鼠标的？

【参考方案4】：

如果这是您所要求的，您不能移动鼠标。但是您可以使用所需的任何上下文和参数调用函数。例如：

function foobar(e)

  this.className = 'whatever'; // this == element


someElement.onmousemove = foobar;

var obj = whatever:'you want';
foobar.call(someElement, obj); // calls foobar(obj) in context of someElement

【参考方案5】：

我想我知道你的问题。您正在尝试以编程方式查询鼠标位置。也许你有这样的代码：

$(document).one('mousemove.myModule', function (e) 
    // e.pageY and e.pageX is undefined.
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); 
        ).trigger('mousemove.myModule');

那么你是完全正确的。不会定义事件对象的 pageY 和 pageX 属性。实际上，事件对象中有很多不存在的东西，不仅仅是.pageY 和.pageX。可能是 jQuery 中的一些错误。无论如何，只是不要链接该调用来触发 和 在 $(window) 上触发事件。不要问我为什么它有效，但对我来说它确实有效：

$(document).one('mousemove.myModule', function (e) 
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX);  );

// Now e.pageY and e.pageX will be defined!
$(window).trigger('mousemove.myModule');

【参考方案6】：

这是我能想到的最好的方法，它不会影响您设置全局变量。 click 事件仍将捕获坐标，因此您可以将该事件传递给 mousemove。

$(element).click(function(e)
  $(element).trigger('mousemove',e);
);

然后，该事件对象将成为 mousemove 函数中的第二个参数；第一个是实际的 mousemove 事件或 jQuery created 事件。

$(element).mousemove(function(e,clickEvent)
  if typeof e.pageX === 'undefined' e = clickEvent;
  // or if you prefer, clickEvent.pageX;
);