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事件

1 个答案: