마우스 이벤트없이 jQuery에서 마우스 위치를 얻는 방법은 무엇입니까?


101

현재 마우스 위치를 얻고 싶지만 사용하고 싶지 않습니다.

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

위치를 파악하고 정보를 처리하면되므로


3
.pageX 및 .pageY는 .mousemove ()뿐만 아니라 모든 이벤트에서 읽을 수 있습니다. 예를 들어, 사용자가 특정 div 내부에서 클릭 한 위치를 정확히 알고 싶을 수 있습니다. 다음은 #special이라는 특정 div 내부에서 클릭 이벤트를 수신하는 예입니다. ..... docs.jquery.com/...
하임 Evgi

이것은 또한 반응 형 사이트의 마우스 포인터 위치를 얻는 데 도움이 될 수 있습니다. kvcodes.com/2014/03/…
Kvvaradha

답변:


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); });마우스 위치에 대해 undefined 반환
spb

9
@TJCrowder 상당히 분명하다고 생각합니다. 그는 "거의 모든 (모두?)"이벤트가 마우스 위치를 제공한다고 주장하는 대답에 응답하기 위해 마우스 위치를 제공하지 않는 이벤트가 있다고 말하는 것입니다.
fabspro 2013-08-07

2
@TJCrowder 방어에서 그는 거의 모든 것을 말했습니다. 그다지 도움이되지 않거나 목적이없는 사람으로 응답함으로써. 이 답변의 요점은 사용자에게 그의 예에서 마우스 이동을 사용할 필요가 없다는 것을 보여주는 것이라고 생각합니다. 그는 무엇이든 사용할 수 있습니다. 사용자는 이벤트없이 그것을 얻는다고 구체적으로 말하지 않았습니다. TJCrowder는 SOME 이벤트 후에 거의 모든 코드가 발생한다고 지적했습니다. 물론 그는 그가 필요한 것을 수행하는 자신의 기능을 만드는 실행 가능한 방법을 보여준 후에 이것을 언급합니다. 어쨌든 대답은 나를 도왔습니다.
타일러

1
@Tyler : 감사합니다. :-) "거의 모든"은 후속 변경이었고, 나의 초기 언어는 너무 강했습니다.
TJ Crowder 2013 년

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

이것에 대한 한 가지 문제는 파이어 폭스에서 드래그 할 때 pageX와 pageY 또는 clientX와 clientY가 없다는 것입니다. 드래그 할 때 pageY를 ​​얻을 수있는 방법이 있습니까?
JamesTBennett 2015

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

2

사용 window.event-이 마지막 포함 event하고 같이 event포함 pageX, pageY등 크롬, 사파리, IE를위한 작품이 아닌 FF.


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

그리고 붐, 여기 있습니다 ..

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.