Question

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

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

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？

Answer 1

$(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没有adjustHeight.change属性。

MDN文档有an excellent article about this（一般而言），as does quirksmode.org（关于事件处理程序）。

<强>解决方案：

将新函数作为处理程序传递，调用event并传递$(window).on('mousemove', function(event) { adjustHeight.change(event); });对象：

adjustHeight.change

使用$.proxy ^[docs]

或将 adjustHeight绑定到$(window).on('mousemove', $.proxy(adjustHeight.change, adjustHeight));：

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

$(window).on('mouseup.dragger', function() {
    // removes both, the mousemove and mousup event handlers
    $(window).off('.dragger');
});

由于您还想稍后取消绑定处理程序，您应该将其分配给变量或使用namespaced event ^[docs]。

示例：

{{1}}

Answer 2

首先，这是错误的：

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

然后，change()默认情况下不会绑定到adjustHeight。你必须做类似的事情：

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

或者，在现代浏览器中：

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

Answer 3

...

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

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

...

（第3行）

console.log("start:" + adjustHeight.startPoint)

javascript对象，使用两种不同的调用函数方式查看预期结果

3 个答案: