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

问题描述 投票:89回答:6

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

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

因为我只需要获得位置并处理信息

jquery mouse position
6个回答
144
投票

我不相信有一种查询鼠标位置的方法,但你可以使用一个只存储信息的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代码之外,几乎所有代码都会响应事件而运行,并且大多数事件都提供鼠标位置。所以你的代码需要知道鼠标可能已经访问过那些信息......


26
投票

如果不使用事件,您无法在jQuery中读取鼠标位置。首先请注意,任何事件都存在event.pageXevent.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

10
投票

我用这个方法:

$(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
投票

此外,如果您在浏览器窗口上执行drag'n'drop,则不会触发mousemove事件。要在drag'n'drop期间跟踪鼠标坐标,您应该为document.ondragover事件附加处理程序并使用它的originalEvent属性。

例:

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

2
投票

使用window.event - 它包含最后的event和任何event包含pageXpageY等。适用于Chrome,Safari,IE但不是FF。


-1
投票

我遇到过这个,分享一下会很高兴......你们怎么想?

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

和繁荣,我们有它..

© www.soinside.com 2019 - 2024. All rights reserved.