[英]events are fired multiple times in class/object
To explain the context, i have a div named Repertory who contain divs with class Card, on the instantiation of my class Explorer i use loadDragNDropEvents() who load dragstart and dragend events on cards, when I start a drag i need to make my canvas have over event and drop event (only when a card is drag).为了解释上下文,我有一个名为 Repertory 的 div,其中包含带有类 Card 的 div,在我的类 Explorer 的实例化中,我使用 loadDragNDropEvents() 在卡片上加载 dragstart 和 dragend 事件,当我开始拖动时,我需要制作我的画布有 over 事件和 drop 事件(仅当卡片被拖动时)。
My code : (I simplify it to focus on the needs)我的代码:(我简化它以专注于需求)
HTML : HTML:
<div id="Repertory">
<div class="Card">Card 1</div>
<div class="Card">Card 2</div>
<div class="Card">Card 3</div>
<div class="Card">Card 4</div>
<div class="Card">Card 5</div>
<div class="Card">Card 6</div>
</div>
<canvas id="canvas" style="width:100px; height: 100px;"></canvas>
JS : JS:
const canvas = document.getElementById("canvas");
var explorer1 = new Explorer(); // Create an Explorer and use loadDragNDropEvents() 2 times
class Explorer() {
contructor(){
loadDragNDropEvents();
loadDragNDropEvents();
}
loadDragNDropEvents() {
const repertory = document.getElementById("Repertory");
if (repertory == undefined) { return this; }
const cards = repertory.querySelectorAll(".Card");
if (cards.length <= 0) { return this; }
console.log("loadDragNDropEvents");
cards.forEach(card => {
card.addEventListener("dragstart", this.#CardDragStartEvent.bind(this), false);
card.addEventListener("dragend", this.#CardDragEndEvent.bind(this), false);
});
}
unloadDragNDropEvents() {
const repertory = document.getElementById("Repertory");
if (repertory == undefined) { return this; }
const cards = repertory.querySelectorAll(".Card");
if (cards.length <= 0) { return this; }
console.log("loadDragNDropEvents");
cards.forEach(card => {
card.removeEventListener("dragstart", this.#CardDragStartEvent.bind(this), false);
card.removeEventListener("dragend", this.#CardDragEndEvent.bind(this), false);
});
}
#CardDragStartEvent(event) {
console.log("dragstart");
canvas.addEventListener("dragover", this.#CanvasDragOverEvent.bind(this), false);
canvas.addEventListener("drop", this.#CanvasDropEvent.bind(this), false);
event.dataTransfer.effectAllowed = "move";
}
#CardDragEndEvent(event) {
console.log("dragend");
canvas.removeEventListener("dragover", this.#CanvasDragOverEvent.bind(this), false);
canvas.removeEventListener("drop", this.#CanvasDropEvent.bind(this), false);
}
#CanvasDragOverEvent(event) {
console.log("over");
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
#CanvasDropEvent(event) {
console.log("drop");
event.preventDefault();
}
}
thanks by advance提前感谢
I use another method that isn't clean but that work well, I'm always listening if someone can solve my problem.我使用另一种不干净但效果很好的方法,如果有人可以解决我的问题,我一直在倾听。
loadDragNDropEvents() {
this.unloadDragNDropEvents(); // Unload drag and drop events before adding new ones
const repertory = document.getElementById("Repertory");
if (repertory == undefined) { return this; }
const cards = repertory.querySelectorAll(".Card");
if (cards.length <= 0) { return this; }
console.log("loadDragNDropEvents");
cards.forEach(card => {
card.addEventListener("dragstart", this.#CardDragStartEvent.bind(this), false);
card.addEventListener("dragend", this.#CardDragEndEvent.bind(this), false);
});
}
// Now clone and replace the DOM élément to clea
unloadDragNDropEvents() {
console.log("unloadDragNDrop");
let oldRep = document.getElementById("Repertory");
let newRep = oldRep.cloneNode(true);
oldRep.parrentNode.replaceChild(newRep, oldRep);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.