Удалить форму при щелчке с помощью CreateJS

Question

Как удалить только фигуру, созданную в CreateJS? Для моего примера я создал несколько квадратов с функцией, называемой createSquare. Моя цель состоит в том, чтобы иметь функцию или событие клика, которое удаляет только квадрат, который щелкнут.

Я пробовал прослушиватели событий и по щелчку, и им не повезло. Я прокомментировал код, который я пытался использовать.

Here is a link to a working fiddle.

JS выглядит следующим образом:

var canvas; 
var stage; 
var square; 

function init() { 
    canvas = document.getElementById("canvas"); 
    stage = new createjs.Stage(canvas); 
} 

function createSquare(){ 
    square = new createjs.Shape(); 
    square.graphics.beginFill("red").drawRect(0, 0, 50, 50) 
    square.x = Math.random() * canvas.width; 
     square.y = Math.random() * canvas.height; 
    stage.addChild(square); 
    stage.update(); 
} 

// This code should remove the squares 
/* 
square.on("click", function(evt) { 
    stage.removeChild(this); 
}); 
*/ 

window.onload = init(); 

createSquare(); 
createSquare(); 
createSquare(); 
createSquare(); 
createSquare(); 
createSquare(); 

Answer 1

обработчики событий в CreateJS передаются в event object. События мыши получают MouseEvent.

Целью мероприятия будет то, что было нажато.

square.on("click", function(evt) { 
    stage.removeChild(evt.target); 
    stage.update(); 
}); 

Вам нужно будет добавить слушателя к каждому квадрату при его создании.

В качестве альтернативы, вы могли бы прослушать сцену один раз.

stage.on("click", function(evt) { 
    stage.removeChild(evt.target); 
    stage.update(); 
});