document.onmousemove 仅由我的 js class 最后创建的 object 处理

Question

我正在尝试创建一个 class 的可移动元素，我得到了两个 this.functions，我的 clique 函数适用于每个 child 的class 但我的 maousemauve 与 mousemove 事件相关，仅适用于最后创建的 object。

我认为问题出在不包含 this. 语句的 document.onmousemove = this.maousemauve 声明，但我没有找到其他方法，是否可以做我想做的事与 class 构造函数有关，还是我以错误的方式寻找？

//déclaration de classe, entre parenthéses, les paramètres "inconnus"qui me permettront de définir rapidement mes futurs objets!
class Domino {

  constructor(id, side1, side2, c) {
    this.id = id;
    this.side1 = side1;
    this.side2 = side2;
    this.lien = document.getElementById(id);
    this.c = c;


    this.clique = (event) => {
      this.c += 1;


      this.lien.style.position = 'absolute';



      if (this.c === 2) {
        this.c = 0;
        console.log(this);
        return this.c;
      }

      console.log(this.c);
      return this.c;

    }


    this.maousemauve = (event) => {
      if (this.c === 1) {
        console.log(this.c);
        this.lien.style.left = event.clientX - 50 + 'px';
        this.lien.style.top = event.clientY - 30 + 'px';
      }
    }


    this.lien.onclick = this.clique;
    this.lien.onmousemove = this.maousemauve;

  }
}

var d1 = new Domino("d1", 0, 1, 0);
var d2 = new Domino("d2", 0, 1, 0);
var d3 = new Domino("d3", 0, 1, 0);


console.log(d1);
console.log(d2);
console.log(d3);

body {
  width: 1000px;
  height: 800px;
}


/*j'utilise les propriétés flex pour aligner les mots au centre dans mes dominos!*/

#d1 {
  width: 100px;
  height: 60px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#d2 {
  width: 100px;
  height: 60px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#d3 {
  width: 100px;
  height: 60px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <br /><br />
  <div id="d1"> d1 </div>
  <div id="d2"> d2 </div>
  <div id="d3"> d3 </div>
</body>

Answer 1

我在您的评论中看到您显然自己找到了解决方案...但效果不佳。

所以这里有一些提示：

使用 Element#addEventListener() 而不是 Element#onXXX 属性来设置事件。
添加一个属性（在我的示例中为 Domino#isMoving），这将使您知道您的元素当前是否正在移动。（也许 Domino#c 是您代码中的那个，但我不确定。）
click 事件将反转 isMoving 值。然后，如果 isMoving === true，它将添加一个 mousemove 事件，否则将删除它。该事件需要附加到 document，否则您的问题：“如果我将光标快速移动，多米诺骨牌将不会跟随光标”将不会已更正。

查看简化示例：

class Domino {
  constructor(id) {
    this.id = id;
    this.lien = document.getElementById(id);
    
    // Allows to know if the domino is moving or not.
    this.isMoving = false;
    
    this.lien.addEventListener('click', (e) => {
      this.listenOnClick(e);
    });
  }
  
  listenOnClick(e) {
    const handleMouseMove = (e) => {
      this.listenOnMouseMove(e);
    };
  
    this.lien.style.position = 'absolute';
    
    // If not moving, it is moving...
    // Or if it's moving, it's not moving!
    this.isMoving = !this.isMoving;
    
    // If it's moving, add an event listener on the document when the mouse is moving
    if (this.isMoving) {
      // Attachs the listener on document, because the mouse is *always* on the document. So even if the mouse is outside the domino, it will move.
      document.addEventListener('mousemove', handleMouseMove);
    } // Or if it's not, remove that event.
    else {
      document.removeEventListener('mousemove', handleMouseMove);
    }
  }
  
  listenOnMouseMove(e) {
    if (this.isMoving) {
      this.lien.style.left = e.clientX - 50 + 'px';
      this.lien.style.top = e.clientY - 30 + 'px';
    }
  }
}

let d1 = new Domino('d1');
  d2 = new Domino('d2');

body {
  width: 1000px;
  height: 800px;
}

.domino {
  width: 100px;
  height: 60px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <div id="d1" class="domino">d1</div>
  <div id="d2" class="domino">d2</div>
</body>

document.onmousemove 仅由我的 js class 最后创建的 object 处理

document.onmousemove only handled by the last created object of my js class

javascript

dom-events

onmousemove