[英]javascript object, seeing expected result using two different ways of calling function
I don't understand why this is happening... 我不明白为什么会这样......
I need to get the objects startPoint
which is set on mousedown and the current e.pageY
from the mousemove to do some calculations. 我需要获取在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())
});
})
However the console prints out the objects startPoint
which is what I expect but e.pageY
is undefined 然而,控制台打印出对象
startPoint
,这是我所期望的,但e.pageY
是未定义的
but when I use this line instead 但是当我使用这条线时
...
$(window).on('mousemove', adjustHeight.change);
$(window).on('mouseup', function() {
$(window).off('mousemove', adjustHeight.change)
});
...
I get the e.pageY
as expected but now the startPoint
is undefined. 我按预期获得了
e.pageY
,但现在startPoint
未定义。 When I checked what this
was pointing at it was the DOMWindow.... 当我检查
this
是指向它的是DOMWindow ....
My question is why is this happening and how would I go about getting both objects properties and the functions e
at the same time? 我的问题是为什么会发生这种情况,我将如何同时获取对象属性和函数
e
?
$(window).on('mousemove', adjustHeight.change());
is executing adjustHeight.change
immediately and passing the return value to .on()
. 正在执行
adjustHeight.change
并将返回值传递给.on()
。 Since you are not passing any argument to adjustHeight.change
, e
will be undefined
(and e.pageY
won't be available). 由于您没有将任何参数传递给
adjustHeight.change
,因此e
将是undefined
(并且e.pageY
将不可用)。
$(window).on('mousemove', adjustHeight.change);
correctly passes the function to .on
, hence later the event object is passed to the handler and you can access e.pageY
. 正确地将函数传递给
.on
,因此稍后将事件对象传递给处理程序,您可以访问e.pageY
。 But the context ( this
) is not adjustHeight
anymore, it's the DOM element you bound the handler to. 但是上下文(
this
)不再是adjustHeight
,它是绑定处理程序的DOM元素。 Which is window
in this case and window
does not have a startPoint
property. 在这种情况下哪个是
window
, window
没有startPoint
属性。
The MDN documentation has an excellent article about this
(in general), as does quirksmode.org (with respect to event handlers). 所述MDN文档具有约一个很好的文章
this
(一般), 一样quirksmode.org (相对于事件处理程序)。
Solution : 方案 :
Pass a new function as handler, which calls adjustHeight.change
and passes the event
object: 将一个新函数作为处理程序传递,调用
adjustHeight.change
并传递event
对象:
$(window).on('mousemove', function(event) {
adjustHeight.change(event);
});
or bind adjustHeight.change
to adjustHeight
using $.proxy
[docs] : 或使用
$.proxy
[docs] 将 adjustHeight.change
绑定到adjustHeight
:
$(window).on('mousemove', $.proxy(adjustHeight.change, adjustHeight));
Since you also want to unbind the handler later, you should either assign it to a variable or use a namespaced event [docs] . 由于您以后还想要解除处理程序的绑定,您应该将其分配给变量或使用命名空间事件[docs] 。
Example: 例:
$(window).on('mousemove.dragger', $.proxy(adjustHeight.change, adjustHeight));
$(window).on('mouseup.dragger', function() {
// removes both, the mousemove and mousup event handlers
$(window).off('.dragger');
});
First of all, this is wrong: 首先,这是错误的:
$(window).on('mousemove', adjustHeight.change());
Then, change()
is not bound to adjustHeight
by default. 然后,默认情况下,
change()
不绑定adjustHeight
。 You'd have to do something like: 你必须做的事情如下:
$(window).on('mousemove', function() {
adjustHeight.change();
});
Or, in modern browsers: 或者,在现代浏览器中:
$(window).on('mousemove', adjustHeight.change.bind(adjustHeight));
... ...
$(window).on('mousemove', adjustHeight.change);
$(window).on('mouseup', function() {
$(window).off('mousemove', adjustHeight.change)
});
... ...
(line:3) (行:3)
console.log("start:" + adjustHeight.startPoint)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.