Javascript 有没有办法触发 mousemove 并获取 event.pageX、event.pageY？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7772222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to trigger mousemove and get event.pageX, event.pageY?
提问by Geo P
So, like the question specifies, is there a way to trigger a mousemove event in jQuery which also sends the mouse coordinates to the event Object?
那么，就像问题指定的那样，有没有办法在 jQuery 中触发 mousemove 事件，该事件还将鼠标坐标发送到事件对象？
So far my code can trigger the mousemove using the .trigger(event) function but the event.pageX and event.pageY are undefined.
到目前为止，我的代码可以使用 .trigger(event) 函数触发 mousemove，但 event.pageX 和 event.pageY 未定义。
采纳答案by dSquared
I don't believe it possible to get the mouse coordinates on demand via JavaScript / jQuery; however if you bind the position to a global var you can then access them at anytime throughout the document like this:
我认为不可能通过 JavaScript / jQuery 按需获取鼠标坐标；但是，如果您将位置绑定到全局变量，则可以在整个文档中随时访问它们，如下所示：
$(document).ready(function(){
$().mousemove(function(e){
window.xPos = e.pageX;
window.yPos = e.pageY;
});
});
for a less CPU intensive option, you can add a timeout, although you trade performance for a slight delay in knowing where the mouse is:
对于 CPU 密集程度较低的选项，您可以添加超时，尽管您在了解鼠标位置时会稍微延迟性能以换取性能：
function getMousePosition(timeoutMilliSeconds) {
$(document).one("mousemove", function (event) {
window.xPos = event.pageX;
window.yPos = event.pageY;
setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds);
});
}
getMousePosition(100);
You should now be able to access the window.xPos and window.yPos from anywhere in the document using either solution without needing to trigger a faux event.
您现在应该能够使用任一解决方案从文档中的任何位置访问 window.xPos 和 window.yPos，而无需触发虚假事件。
回答by tenedor
You need to set pageXand pageYdirectly before triggering the event. To set these properties, make a jQuery.Eventobject.
您需要在触发事件之前直接设置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);
回答by Ryre
I'm not sure I fully understand the question. You can do:
我不确定我是否完全理解这个问题。你可以做：
$('.someClass').mousemove(function(event){
console.log(event.pageX);
console.log(event.pageY);
});
Now, whenever the mouse moves over someClass, it will register the xy cordinates. Here's the jsfiddleto see it in action and the jquery documentation.
现在，只要鼠标移过someClass，它就会注册 xy 坐标。这是jsfiddle来查看它的实际效果和 jquery文档。
回答by Nux
You cannot move a mouse if that is what you're asking. But you could call a function with whatever context and arguments you want. E.g.:
如果这是你的要求，你不能移动鼠标。但是您可以使用您想要的任何上下文和参数调用函数。例如：
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
回答by Martin Andersson
Think I know your problem. You're trying to query the mouse position programmatically. Perhaps you have code something like this:
想我知道你的问题。您正在尝试以编程方式查询鼠标位置。也许你有这样的代码：
$(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');
Then you're absolutely right. The properties pageY and pageX on the event object won't be defined. Actually, there's a hole lot of stuff in the event object that won't be there, not just .pageYand .pageX. Could be some bug in jQuery. Anyways, just don't chain that call to trigger andtrigger the event on $(window) instead. Don't ask me why it works though but for me it did:
那么你是完全正确的。不会定义事件对象上的属性 pageY 和 pageX。实际上，事件对象中有很多东西不会在那里，而不仅仅是.pageYand .pageX。可能是 jQuery 中的一些错误。无论如何，只是不要将该调用链接到 trigger并在 $(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');
回答by Gary
This is the best I could come up with, that doesn't inolve you setting global variables. The click event will still capture the coordinates, so you can pass that event to your mousemove.
这是我能想到的最好的方法，它不会涉及您设置全局变量。click 事件仍将捕获坐标，因此您可以将该事件传递给 mousemove。
$(element).click(function(e){
$(element).trigger('mousemove',e);
});
Then, that event object will be the second argument in your mousemove function; the first being either the actual mousemove event or the jQuery created event.
然后，该事件对象将成为 mousemove 函数中的第二个参数；第一个是实际的 mousemove 事件或 jQuery 创建的事件。
$(element).mousemove(function(e,clickEvent){
if typeof e.pageX === 'undefined' e = clickEvent;
// or if you prefer, clickEvent.pageX;
});
