我正在尝试创建一类可移动元素，我得到两个this.functions，我的clique函数适用于每个孩子的类，但我的maousemauve与mousemove事件相关仅适用于最后创建的对象。
我认为问题来自document.onmousemove = this.maousemauve声明，其中不包括this.声明，但我没有找到如何做其他事情，是否有可能做我想做的类构造函数或我在寻找错误办法？
//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>我在你的评论中读到，你显然已经找到了自己的解决方案......但效果不佳。
所以这里有一些提示：
Element#addEventListener()而不是Element#onXXX属性来设置事件。Domino#isMoving），这将允许您知道您的元素当前是否正在移动。 （也许Domino#c是你代码中的那个，但我不确定。）click事件将扭转isMoving值。然后，它将添加mousemove事件，如果isMoving === true，或将删除它，如果没有。该事件需要附加到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>