0

我不明白为什么会这样……

我需要获取startPoint在 mousedown 上设置的对象和e.pageY来自 mousemove 的电流来进行一些计算。

var adjustHeight = {
    change: function(e) {
        console.log(this.startPoint)
        console.log(e.pageY);
    },
};

$('#dragger').mousedown(function(e) {
    e.preventDefault();

    adjustHeight.startPoint = e.pageY;

    $(window).on('mousemove', adjustHeight.change());

    $(window).on('mouseup', function() {
        $(window).off('mousemove', adjustHeight.change())
    });
})

然而，控制台打印出startPoint我所期望但e.pageY未定义的对象

但是当我改用这条线时

...
    $(window).on('mousemove', adjustHeight.change);

    $(window).on('mouseup', function() {
        $(window).off('mousemove', adjustHeight.change)
    });
...

我得到了e.pageY预期的结果，但现在startPoint未定义。当我检查this指向它的是 DOMWindow ....

我的问题是为什么会发生这种情况，我将如何同时获取对象属性和函数e？

4

3 回答 3

2 
$(window).on('mousemove', adjustHeight.change());

正在adjustHeight.change立即执行并将返回值传递给.on(). 由于您没有将任何参数传递给adjustHeight.change,e将会undefined（并且e.pageY将不可用）。

$(window).on('mousemove', adjustHeight.change);

正确地将函数传递给.on，因此稍后将事件对象传递给处理程序并且您可以访问e.pageY. 但是上下文 ( this)adjustHeight不再存在，它是您将处理程序绑定到的 DOM 元素。window在这种情况下，它window没有startPoint属性。

MDN 文档有一篇关于this（一般而言）的优秀文章，quirksmode.org 也是如此（关于事件处理程序）。

解决方案：

传递一个新函数作为处理程序，它调用adjustHeight.change并传递event对象：

$(window).on('mousemove', function(event) {
    adjustHeight.change(event);
});

或绑定 adjustHeight.change到adjustHeight使用$.proxy [docs]：

$(window).on('mousemove', $.proxy(adjustHeight.change, adjustHeight));

由于您还想稍后取消绑定处理程序，您应该将其分配给变量或使用命名空间事件[docs]。

例子：

$(window).on('mousemove.dragger', $.proxy(adjustHeight.change, adjustHeight));

$(window).on('mouseup.dragger', function() {
    // removes both, the mousemove and mousup event handlers
    $(window).off('.dragger');
});
于 2012-05-12T17:28:17.307 回答
0

首先，这是错误的：

$(window).on('mousemove', adjustHeight.change());

然后，默认情况下change()不绑定adjustHeight。您必须执行以下操作：

$(window).on('mousemove', function() {
    adjustHeight.change();
});

或者，在现代浏览器中：

$(window).on('mousemove', adjustHeight.change.bind(adjustHeight));
于 2012-05-12T17:30:28.223 回答
0

...

$(window).on('mousemove', adjustHeight.change);

$(window).on('mouseup', function() {
    $(window).off('mousemove', adjustHeight.change)
});

...

（行：3） 

console.log("start:" + adjustHeight.startPoint)
于 2012-05-12T18:09:11.760 回答