マウスイベントなしで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); });マウス位置の未定義を返す
spb

9
@TJCrowderかなり明白だと私は思う、彼は「ほぼすべて(すべて?)」のイベントがマウスの位置を提供するという主張に答えるために、マウスの位置を提供しないイベントがそこにあると言っている。
fabspro 2013

2
@TJCrowderの弁護において、彼はほぼすべてを言った。役に立たないもので対応することは、それほど有益でも目的的でもありません。この答えのポイントは、彼の例ではマウスの移動を使用する必要がないことをユーザーに示すことだと思います...彼は何でも使用できます。ユーザーは、イベントなしでそれを取得することを具体的に言っていませんでした。TJCrowderは、SOMEイベントの後にほぼすべてのコードが発生することを指摘しています。もちろん彼は、彼が必要とすることをするあなた自身の機能を作るための実行可能な方法を示した後にこれについて言及します。とにかく答えは私を助けました。
タイラー

1
@タイラー:ありがとう。:-)「ほぼすべて」はその後の変更であり、私の最初の言語は強すぎました。
TJクラウダー2013

26

イベントを使用せずにjQueryでマウスの位置を読み取ることはできません。まず、event.pageXおよびevent.pageYプロパティはすべてのイベントに存在するため、次のようにすることができます。

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

他のオプションは、クロージャを使用して、マウスムーブハンドラによって更新される変数にコード全体にアクセスできるようにすることです。

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

// do something with mouseX and mouseY

これに関する1つの問題は、Firefoxでドラッグするときに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;
    }
}


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.