如何在没有鼠标事件的情况下获取jQuery中的鼠标位置?


101

我想获取当前的鼠标位置,但是我不想使用:

$(document).bind('mousemove',function(e){ 
        $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); 

因为我只需要获取职位并处理信息


3
.pageX和.pageY可以从任何事件中读取,而不仅仅是.mousemove()。例如,也许您想确切知道用​​户在特定div内单击的位置:这是一个示例,我们在特定div内监听一个名为#special的click事件。..... docs.jquery.com/...
哈伊姆Evgi

这也可以帮助您获取响应站点的鼠标指针位置。kvcodes.com/2014/03/...
Kvvaradha

Answers:


151

我不相信有一种查询鼠标位置的方法,但是您可以使用mousemove只存储信息的处理程序,以便查询存储的信息。

jQuery(function($) {
    var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    // ELSEWHERE, your code that needs to know the mouse position without an event
    if (currentMousePos.x < 10) {
        // ....
    }
});

但是除了setTimeout代码之类的代码外,几乎所有代码都响应事件而运行,并且大多数事件都提供鼠标位置。因此,您需要知道鼠标位置的代码可能已经可以访问该信息...


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });返回不确定的鼠标位置
spb

9
@TJCrowder我认为很明显,他是说那里有一个不提供鼠标位置的事件,以回应声称“几乎所有(全部?)”事件可以提供鼠标位置的事件。
fabspro 2013年

2
在@TJCrowder辩护中,他几乎说了所有话。通过回应没有帮助的人并不是那么有用或有目的。我认为这个答案的重点是向用户表明,在他的示例中,他不必使用鼠标移动...他可以使用任何东西。用户没有明确说没有事件就获取它,TJCrowder指出几乎所有代码都在某些事件后发生。当然,他提到此事后,展示了一种可行的方法来实现自己需要的功能。无论如何,答案对我有帮助。
泰勒(Tyler)2013年

1
@泰勒:谢谢。:-)“几乎所有”都是后来的更改,我的最初语言太强了。
TJ Crowder

26

如果不使用事件,则无法在jQuery中读取鼠标位置。首先请注意,event.pageXand event.pageY属性存在于任何事件中,因此您可以执行以下操作:

$('#myEl').click(function(e) {
    console.log(e.pageX);
});

您的另一个选择是使用闭包来使您的整个代码可以访问由mousemove处理程序更新的变量:

var mouseX, mouseY;
$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
}).mouseover(); // call the handler immediately

// do something with mouseX and mouseY

这个问题是您在使用Firefox时没有pageX和PageY或clientX和clientY ...拖动时是否有获取pageY的方法?
JamesTBennett

11

我用这种方法:

$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

function show_popup(str) {
    $("#popup_content").html(str);
    $("#popup").fadeIn("fast");
    $("#popup").css("top", y);
    $("#popup").css("left", x);
}

这样,我将始终将与顶部的距离保存在y中,并将与顶部的距离保存在x中。


6

此外,mousemove如果在浏览器窗口上执行拖放操作,则不会触发事件。要在拖放过程中跟踪鼠标坐标,应为document.ondragover事件附加处理程序,并使用它的originalEvent属性。

例:

var globalDragOver = function (e)
{
    var original = e.originalEvent;
    if (original)
    {
        window.x = original.pageX;
        window.y = original.pageY;
    }
}


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

$(document).mousemove(function(event) {
    CurrentMouseXPostion = event.pageX;
    CurrentMouseYPostion = event.pageY;
});

在主要对象(在本例中为文档对象)上创建一个eventListener,以获取每帧的鼠标坐标并将其存储在全局变量中,这样,您可以随时随地读取鼠标Y和Z。


-1

我碰到了这个,希望能分享一下...

你们有什么感想?

$(document).ready(function() {
  window.mousemove = function(e) {
    p = $(e).position();  //remember $(e) - could be any html tag also.. 
    left = e.left;        //retrieving the left position of the div... 
    top = e.top;          //get the top position of the div... 
  }
});

和繁荣,我们有它。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.