1

現在、マウスが動くと「何かをします」。ただし、ユーザーがブラウザーのサイズを変更したり、ブラウザーを下にスクロールしたりした場合も、まったく同じことをしたいと考えています。jQuery(document).bind('mousemove',function(e){ var x, y; x = e.pageX; // x 座標 y = e.pageY; // y 座標 //その他のもの });

やってみた

jQuery(document).bind('mousemove resize scroll',function(e){...

しかし、うまくいきませんでした。私も試しました

jQuery(document, window).bind('mousemove resize scroll',function(e){...

しかし、それもうまくいきませんでした。

を使用してスクロールを検出できることも知っています

$(window).scroll(function(){

を使用してサイズ変更を検出します

$(window).resize(function() {

しかし、これらの検出を使用すると、マウスの x 座標と y 座標を取得するための「e」引数がありません。

3 つのイベントすべてを 1 つの関数にバインドするにはどうすればよいですか?

ありがとう

4

2 に答える 2

2

scroll メソッドと resize メソッドにはまだイベント データがあります。コードを 3 つのハンドラーを持つ 1 つの関数にラップしてみてください。on() メソッドには jQuery 1.7+ が必要です

function reusable(eData){
    // Heres what you want to do every time
}
$(document).on({
    mousemove: function(e) { reusable(e); },
    scroll   : function(e) { reusable(e); }
);
$(window).on({
    resize   : function(e) { reusable(e); }
});

編集済み

イベントは正しいオブジェクトにある必要がありwindowます。そうしdocumentないと、予期しない値が得られます。

于 2012-05-14T22:26:15.417 に答える
1

あなたのコメントから：

問題は、サイズ変更またはスクロールイベントがアクティブ化されたときに、e.pageXが定義されておらず、アプリケーションが破損していることです。

では、現在のオブジェクトプロパティがわかっているのに、なぜそれらを使用しているのundefinedでしょうか。グローバル変数を使用して、最後の値を保持してみませんか？

JsBinでの実例

var clientX = 0, clientY = 0,
    screenX = 0, screenY = 0,
    pageX = 0,   pageY = 0;    

// bind the events in the correct objects
jQuery(window).bind('resize',function(e) { getBindingValues(e); });
jQuery(document).bind('mousemove scroll',function(e) { getBindingValues(e); });

// your one-function
function getBindingValues(e) {

  clientX = e.clientX ? e.clientX : clientX;
  clientY = e.clientY ? e.clientY : clientY;

  screenX = e.screenX ? e.screenX : screenX;
  screenY = e.screenY ? e.screenY : screenY;

  pageX = e.pageX ? e.pageX : pageX;
  pageY = e.pageY ? e.pageY : pageY;

  $("#hello").html(    
    "*** Safe values ***<br/>" + 
    "mouse: X." + clientX + " Y." + clientY + "<br/>" +
    "page: X." + pageX + " Y." + pageY + "<br/>" +
    "screen: X." + screenX + " Y." + screenY + "<br/><br/>" +
    "*** More values ***<br/>" + 
    "window: W." + $(window).width() + " H." + $(window).height() + "<br/>" +
    "type: <b>" + e.type + "</b>"
  );
}

とのe（イベント）オブジェクトの下で比較できますmousemovescroll

スクロールで

ここに画像の説明を入力してください

mousemoveで

ここに画像の説明を入力してください

于 2012-05-14T22:37:36.770 に答える