web-dev-qa-db-ja.com

マウスイベントなしでjQueryでマウス位置を取得する方法は？

現在のマウスの位置を取得したいが、使用したくない：

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

位置を取得して情報を処理するだけです

jquerymouseposition
91
Martin Vseticka

マウスの位置をqueryする方法はないと思いますが、情報を保存するだけの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コードなどを除くほとんどすべてのコードは、イベントに応答して実行され、ほとんどのイベントはマウスの位置を提供します。したがって、おそらくマウスが既にその情報にアクセスできる場所を知る必要があるコードは...

142
T.J. Crowder

イベントを使用せずにjQueryでマウスの位置を読み取ることはできません。最初に、event.pageXおよびevent.pageYプロパティがすべてのイベントに存在することに注意してください。

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

もう1つのオプションは、クロージャーを使用して、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
26
lonesomeday

私はこの方法を使用しました：

$(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に保存します。

10
Nicu Criste

さらに、ブラウザウィンドウ上でドラッグアンドドロップを実行した場合、mousemoveイベントはトリガーされません。ドラッグアンドドロップ中にマウス座標を追跡するには、document.ondragoverイベントのハンドラーをアタッチし、そのoriginalEventプロパティを使用する必要があります。

例：

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

window.eventを使用します-最後のeventが含まれ、eventにはpageX、pageYなどが含まれます。Chrome、Safari、IEで機能しますが、FFは使用できません。

2
Alex Tsurika