Question

以下测试代码正常运行。 mousemove事件触发checkPosition函数，该函数将鼠标位置存储在对象mousePosition内。

"use strict";

const mousePosition = {
    x: 0,
    y: 0
}

function checkPosition(e) {
    mousePosition.x = e.clientX;
    mousePosition.y = e.clientY;
}
    
addEventListener("mousemove", checkPosition);
addEventListener("click", () => console.log(mousePosition) );

但是如果可能的话，我想简化一下。有没有办法将鼠标位置存储在回调函数中？我尝试了一些不同的方法，但我没有运气。

下面的代码不起作用，但希望它能说明我正在努力实现的目标。我知道我的语法必须搞砸但我不知道如何构建它。非常感谢！

"use strict";

const mousePosition = (e) => {
    x: e.clientX,
    y: e.clientY
};
    
addEventListener("mousemove", mousePosition);
addEventListener("click", () => console.log(mousePosition.x, mousePosition.y) );

Answer 1

您可以通过动态添加x和y属性来执行此操作：

"use strict";

const mousePosition = (e) => {
  mousePosition.x = e.clientX;
  mousePosition.y = e.clientY;
};

addEventListener("mousemove", mousePosition);
addEventListener("click", () => console.log(mousePosition.x, mousePosition.y));

Answer 2

您可以使用命名函数来访问函数自己的对象：

"use strict";

const mousePosition = function f(e) {
  f.x = e.clientX;
  f.y = e.clientY;
};

addEventListener("mousemove", mousePosition);
addEventListener("click", () => console.log(mousePosition.x, mousePosition.y));

在f函数内部使用函数的本地名mousePosition是必要的，以确保属性存储在给定函数中，无论其他代码是否替换外部变量mouseFunction还有别的东西。

[尽管const应该阻止这种情况，但从该对象中引用对象的外部名称仍然是不错的做法]

在ES5之前的代码中，您可以使用arguments.callee.<property>但严格模式禁止使用。{/ p>

回调函数可以是一个存储属性的对象吗？

2 个答案: