javascript - 如何将 mousemove 滚动和调整大小全部绑定到一个函数中

Question

目前，我在鼠标移动时“做事”。但是，如果用户调整浏览器大小或向下滚动浏览器，我也想做同样的事情。jQuery(document).bind('mousemove',function(e){ var x, y; x = e.pageX; // x coord y = e.pageY; // y coord //other stuff });

我试着做

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

但它没有用。我也试过

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

但它也没有用。

我也知道你可以使用检测滚动

$(window).scroll(function(){

并使用检测调整大小

$(window).resize(function() {

但是如果我使用这些检测，我将没有“e”参数来获取鼠标的 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呢？为什么不使用全局变量并在其中保存最后一个值？

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

在滚动

鼠标移动