javascript - 将元素移动到光标位置会被记录，但不会应用位置更改

Question

我有一个具有可链接函数的对象，它工作正常。单击三 Angular 形本身会触发动画并相应地平移元素。 现在我有另一个函数应该将三 Angular 形转换为当前鼠标位置，js 如下:

moveToTarget: function(e) {
var mouseX = 0, 
mouseY = 0,
xp = 0,
yp = 0;
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
block.style.left = xp + 'px';
block.style.top = yp + 'px';
setTimeout(moveToTarget,30);

return this;

请记住，这只是对象 animateBlock 的方法之一，我不确定是否必须在 SetTimeout 中将其称为 animateBlock.moveToTarget。

这是调用:

container.addEventListener("click", function(e){
console.log(e.pageY); // this log the Y position
animateBlock.moveToTarget;});

我没有收到 JS lint 错误，也没有在控制台中抛出运行时错误，它只是出于某种原因不应用翻译，我在这里错过了什么？

链接:

https://codepen.io/damianocel/pen/MvvXoq

Answer 1

这是一个可用的代码笔:https://codepen.io/anon/pen/mMXwwV?editors=0111

我不得不做一些改变，所以我很抱歉:

• 您在调用 moveToTarget() 时没有参数，事件
• moveToTarget() 函数没有做任何事情。您没有使用 event，因此值始终为 0。
• 我删除了边距:50% 0；来自三 Angular 形，因为它弄乱了它的 X 位置(使得使用 translateX() 变得困难)。
• 我把“px”直接放在函数中，所以参数现在只是数字。
• 新函数 moveXAndY() 以便同时修改 translateX() 和 translateY()(否则它们会相互覆盖)。
• 代码有点乱，我不习惯在 CodePen 上编辑，对此深表歉意。