web-dev-qa-db-ja.com

mousemoveをトリガーしてevent.pageX、event.pageYを取得する方法はありますか？

それで、質問が指定するように、マウス座標をイベントObjectにも送信するjQueryでmousemoveイベントをトリガーする方法はありますか？

これまでのところ、私のコードは.trigger（event）関数を使用してマウスムーブをトリガーできますが、event.pageXとevent.pageYは未定義です。

javascriptjqueryjavascript-eventsmouseevent
24
Geo P

JavaScript/jQueryを介してオンデマンドでマウスの座標を取得することが可能だとは思いません。ただし、位置をグローバル変数にバインドすると、次のようにドキュメント全体でいつでもそれらにアクセスできます。

$(document).ready(function(){
   $().mousemove(function(e){
      window.xPos = e.pageX;
      window.yPos = e.pageY;
   }); 
});

cPUをあまり必要としないオプションの場合、タイムアウトを追加できますが、マウスがどこにあるかを知る際のわずかな遅延とパフォーマンスを交換します。

function getMousePosition(timeoutMilliSeconds) {
    $(document).one("mousemove", function (event) {
        window.xPos = event.pageX;
        window.yPos = event.pageY;
        setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds);
    });
}
getMousePosition(100);

これで、偽のイベントをトリガーする必要なく、どちらのソリューションを使用しても、ドキュメントのどこからでもwindow.xPosおよびwindow.yPosにアクセスできるはずです。

3
dSquared

イベントをトリガーする前に、pageXとpageYを直接設定する必要があります。これらのプロパティを設定するには、jQuery.Eventオブジェクト。

// create a jQuery event
e = $.Event('mousemove');

// set coordinates
e.pageX = 100;
e.pageY = 100;

// trigger event - must trigger on document
$(document).trigger(e);

jsFiddleで確認してください 。

38
tenedor

その質問を完全に理解しているとは思いません。できるよ：

$('.someClass').mousemove(function(event){
    console.log(event.pageX);
    console.log(event.pageY);
});

これで、マウスがsomeClassの上に移動するたびに、xy座標が登録されます。 jsfiddle と実際の動作を見るには、jquery documentation をご覧ください。

0
Ryre

それがあなたが求めているものであるならば、あなたはマウスを動かすことができません。ただし、必要なコンテキストと引数を使用して関数を呼び出すことができます。例えば。：

function foobar(e)
{
  this.className = 'whatever'; // this == element
}

someElement.onmousemove = foobar;

var obj = {whatever:'you want'};
foobar.call(someElement, obj); // calls foobar(obj) in context of someElement
0
Nux

私はあなたの問題を知っていると思います。プログラムでマウスの位置を照会しようとしています。おそらく次のようなコードがあります：

$(document).one('mousemove.myModule', function (e) {
    // e.pageY and e.pageX is undefined.
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); }
        ).trigger('mousemove.myModule');

その後、あなたは絶対的に正しいです。イベントオブジェクトのプロパティpageYおよびpageXは定義されません。実際、イベントオブジェクトには、.pageYと.pageXだけではなく、そこには存在しない多くの要素があります。 jQueryのバグの可能性があります。とにかく、トリガーを呼び出す呼び出しをチェーンしないでくださいand代わりに$（window）でイベントをトリガーします。なぜそれが機能したのか私に尋ねないでください、しかし私にとってそれは機能しました：

$(document).one('mousemove.myModule', function (e) {
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); } );

// Now e.pageY and e.pageX will be defined!
$(window).trigger('mousemove.myModule');
0
Martin Andersson

これは私が思いつくことができる最高のものです、それはあなたがグローバル変数を設定することを怠らないわけではありません。クリックイベントは引き続き座標をキャプチャするため、そのイベントをマウスムーブに渡すことができます。

$(element).click(function(e){
  $(element).trigger('mousemove',e);
});

次に、そのイベントオブジェクトは、mousemove関数の2番目の引数になります。 1つ目は、実際のmousemoveイベントまたはjQuery作成イベントのいずれかです。

$(element).mousemove(function(e,clickEvent){
  if typeof e.pageX === 'undefined' e = clickEvent;
  // or if you prefer, clickEvent.pageX;
});
0
Gary