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

【问题标题】：How to bind mousemove scroll and resize all into one function如何将 mousemove 滚动和调整大小全部绑定到一个函数中
【发布时间】：2012-05-14 22:10:36
【问题描述】：

目前，我在鼠标移动时“做事”。但是，如果用户调整浏览器大小或向下滚动浏览器，我也想做同样的事情。 jQuery(document).bind('mousemove',function(e){ 变量 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() {

但是如果我使用这些检测，我将没有“e”参数来获取鼠标的 x 和 y 坐标

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

谢谢

【问题讨论】：

我试图重现代码（在 Google Chrome 中尝试过）：jQuery(document, window).bind('mousemove resize scroll',function(e){console.log(e)}); 它对我有用（我在控制台中看到 pageX、pageY 等等）。你用什么浏览器？
@true 问题是当激活调整大小或滚动事件时 e.pageX 未定义，这破坏了我的应用程序。我需要它，所以如果有调整大小或滚动，它将调用绑定 mousemove 并从该调用中获取“e”参数。我也在使用铬。如果您记录 e.pageX，则无论何时滚动或调整大小，它都会记录“未定义”。

标签： javascript jquery

【解决方案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中，否则你会得到意想不到的值。

【讨论】：

我收到错误“Uncaught TypeError: Object [object DOMWindow] has no method 'on'”，我使用的是 jquery 版本 1.7.1(ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js)
尝试使用 $('body').on() 根据一些 jQuery 错误跟踪页面，我不确定它是否适用于窗口。
这会遇到同样的问题，因为他想知道为什么在scroll 事件对象中没有属性e.screenX。

【解决方案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>"
  );
}

您可以在mousemove 和scroll 上的e（事件）对象下方进行比较

滚动

鼠标移动

【讨论】：

滚动时事件数据似乎未定义。
只有一些属性，打开inspector自己看看。因为它们是 undefined 我将它们保存在一个全局变量中，所以你的应用程序不会中断......正如你在评论中所说的那样。
@BobRen 当然可以，resize 是来自 window 对象的事件，而不是您指定的 document... 它应该是 $(window).bind('resize', ...
有什么方法可以优雅地使用它，这样我就不必使用重复的代码了吗？
只需将document 更改为window，调整大小并将气泡向上滚动到窗口。相应地更改了我的示例和答案代码。