Javascript mousemove событие не срабатывает, когда в объекте - PullRequest
Новая
       15

Javascript mousemove событие не срабатывает, когда в объекте

0 голосов
/ 09 сентября 2018

Надеюсь, у тебя все хорошо. Вот моя проблема:

Этот код отлично работает: 

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. Кажется, это проблема объема, но я не могу понять, почему это так действует.

Заранее большое спасибо!

1 Ответ

0 голосов
/ 09 сентября 2018

Объект this из this.mouseMoved ссылается на цель события, которая является элементом 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>
...