在对象中未触发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>