如何绑定mousemove scroll并将所有内容调整为一个函数

Question

目前，我做的事情＆＃34;当鼠标移动时但是，如果用户调整浏览器大小或向下滚动浏览器，我也想做同样的事情。     jQuery的（文件）.bind（＆＃39;鼠标移动＆＃39;，函数（E）{             var x，y;             x = e.pageX; // x coord             y = e.pageY; // y coord             //其他的东西     }）;

我尝试过做

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

但它没有用。我也试过

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

但它也没有用。

我也知道您可以使用

检测滚动

$(window).scroll(function(){

并使用

检测调整大小

$(window).resize(function() {

但是，如果我使用那些检测，我就不会有＆＃34; e＆＃34;获取鼠标的x和y坐标的参数

如何将所有3个事件全部绑定到一个函数中？

由于

Answer 1

您仍然在滚动和调整大小方法中拥有事件数据。尝试使用3个处理程序将代码包装到单个函数中。 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中，否则您将获得意外的值。

Answer 2

来自你的评论：

  

问题是当调整大小或滚动事件并且正在破坏我的应用程序时，e.pageX未定义

那么，当你知道它们是undefined时，为什么要使用当前的对象属性？为什么不使用全局变量并在其中保留最后一个值？

  

Live example in 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和mousemove上的scroll（事件）对象下面进行比较

滚动

on mousemove