点击事件触发的次数越来越多

Question

所以我正在尝试构建一个svg编辑器。对于此功能，我试图通过使用onClick事件在每个角绘制较小的矩形来突出显示所选矩形。但每次我点击rect，事件就会触发多次，每次我再次点击它，事件就会比以前触发多次。我附加了代码，但endDraw方法是在绘制rect和adaugaClick绘制小矩形时添加事件侦听器的方法。是什么问题导致点击事件多次触发？我试着打电话给e.stopPropagation();，认为这可能与此有关，但不起作用

class BarChart {
constructor(domElement) {
this.domElement = domElement;
this.svgns = "http://www.w3.org/2000/svg";
this.rect = document.createElementNS(this.svgns, 'rect');
}
draw() {
this.domElement.addEventListener("mousedown", (event) => {
if (event.button === 0) {
const rect = document.createElementNS(this.svgns, 'rect');
//rect.setAttribute('tabindex', "1");
let first_mouseX = event.clientX;
let first_mouseY = event.clientY;
const drawRect = (event) => {
let mouseX = event.clientX;
let mouseY = event.clientY;
const width = Math.abs(mouseX - first_mouseX);
const height = Math.abs(mouseY - first_mouseY);
if (mouseX > first_mouseX) {
mouseX = first_mouseX;
}
if (mouseY > first_mouseY) {
mouseY = first_mouseY;
}
rect.setAttribute('x', mouseX);
rect.setAttribute('y', mouseY);
rect.setAttribute('width', width);
rect.setAttribute('height', height);
rect.setAttribute('stroke', "black");
rect.setAttribute('fill', 'white');
this.rect = rect;
this.domElement.appendChild(rect);
}
const endDraw = (e) => {
this.domElement.removeEventListener("mousemove", drawRect);
this.domElement.removeEventListener("mouseup", () => endDraw(event));
this.rect.addEventListener("click", () => this.adaugaClick(e))
}
this.domElement.addEventListener("mouseup", endDraw)
this.domElement.addEventListener("mousemove", drawRect)
}
})
console.dir(this.domElement)
}
adaugaClick(e) {
const dreptunghi = this.creeazaSelect(e);
for (let rect of dreptunghi)
this.domElement.appendChild(rect);
}
creeazaSelect(event) {
const forma = event.target;
const h = "8px";
const w = "8px";
const widthForma = parseInt(forma.getAttribute("width"));
const heightForma = parseInt(forma.getAttribute("height"));
const xForma = parseInt(forma.getAttribute('x')) - parseInt(w, 10) / 2;
const yForma = parseInt(forma.getAttribute('y')) - parseInt(w, 10) / 2;
const dreptunghiuri = [];
for (let i = 0; i <= 5; i++) {
const rect = document.createElementNS(this.svgns, 'rect');
if (i === 0) {
rect.setAttribute('x', xForma);
rect.setAttribute('y', yForma);
}
else if (i === 1) {
rect.setAttribute('x', xForma + widthForma / 2);
rect.setAttribute('y', yForma);
}
else if (i === 2) {
rect.setAttribute('x', (xForma + widthForma));
rect.setAttribute('y', yForma);
}
else if (i === 3) {
rect.setAttribute('x', xForma);
rect.setAttribute('y', yForma + heightForma);
}
else if (i === 4) {
rect.setAttribute('x', xForma + widthForma / 2);
rect.setAttribute('y', yForma + heightForma);
}
else if (i === 5) {
rect.setAttribute('x', (xForma + widthForma));
rect.setAttribute('y', yForma + heightForma);
}
rect.setAttribute('height', h);
rect.setAttribute("width", w);
rect.setAttribute('stroke', "black");
rect.setAttribute("fill", "#00FFFF");
dreptunghiuri.push(rect);
}
return dreptunghiuri;
}
}

Answer 1

每次单击rect时，您的mousedown事件都会触发。当在endDraw中向this.rect添加eventListener时，问题就出现了。这导致了不稳定的行为，因为this.rect包含您创建的最后一个矩形，它将越来越多的eventListeners。您可以通过在this.rect.addEventListener("click", () => this.adaugaClick(e));之后设置this.rect = null;来解决此问题