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>

Javascript 在对象中时未触发 mousemove 事件

Javascript mousemove event not triggered when in object

javascript

events

scope

mousemove