在对象中未触发Javascript mousemove事件

Question

我希望你做得很好。 这是我的问题：

这段代码运行良好：

var imageMover = {
    mouseDown: function(e) {
        e.target.addEventListener("mousemove", mouseMoved, false);
        console.log('mouseDown');
    },
    mouseUp: function(e) {
        e.target.removeEventListener("mousemove", mouseMoved, false);
        console.log('mouseUp');
    }
};
function mouseMoved(e) {
    console.log("mouseMoved");
}

虽然这个不是：

var imageMover = {
    mouseDown: function(e) {
        e.target.addEventListener("mousemove", this.mouseMoved, false);
        console.log('mouseDown');
    },
    mouseUp: function(e) {
        e.target.removeEventListener("mousemove", this.mouseMoved, false);
        console.log('mouseUp');
    },
    mouseMoved: function(e) {
        console.log("mouseMoved");
    }
};

提供更多背景信息：您可以点击一些缩略图。 当您单击它时，图像被添加到容器中，并且事件 mouseUp 和 mouseDown 被添加到图像中。 当有人单击图像时，我希望附加事件 mouseMouve 以便我可以跟随图像位置。

mouseUp 和 mouseDown 连接良好，触发良好，但 mouseMouve 仅在它不在我的 imageMover 对象内时才有效。 这似乎是一个范围问题，但我不知道为什么会这样。

提前，非常感谢！

Answer 1

this.mouseMoved 中的 this 是指事件目标，它是 DOM 元素而不是存储方法的对象。

var imageMover = {
  mouseDown: function(e) {
    console.log( 'this is refering to => ', this );
    e.target.addEventListener("mousemove", this.mouseMoved, false);
  }
};

document.querySelector( '.container' ).addEventListener( 'mousedown', imageMover.mouseDown );

.container
{
  width: 500px;
  height: 100px;
  border: 1px solid #000;
}

<div class="container"></div>