Click events very slow on Firefox, IE, and Edge browsers

96 views
Skip to first unread message

Anton Khakhalin

unread,
Jun 16, 2016, 11:00:38 AM6/16/16
to CreateJS Discussion
Hi Everyone,
Click events are fast on Chrome, but I have issues with Firefox, IE, and Edge browsers.
After clicking, there is a 2 second delay before the stage is updated.
The framerate is set to 24 FPS.

It looks like there is a ton of garbage collection going on. Please see the images.

This is my code;
var gamestage = this;

var tilex = 608;
var tiley = -280;
var tempx = 0;
var tempy = 0;

var tileCoorX = new Array();
var tileCoorY = new Array();
var xx = 0;
var yy = 0;

tileOnDown = function (e) {
//tells us the tile clicked on.
gamestage.debug_txt.text = tileCoorX[e.currentTarget.id] + "," + tileCoorY[e.currentTarget.id];
}

//generate tiles
for (xx = 0; xx < 40; xx++) {
tempx = tilex;
tempy = tiley;
for (yy = 0; yy < 40; yy++) {
//adding a bitmap from the library
var tile = new lib.theGraphic();
tile.x = tempx;
tile.y = tempy;
gamestage.addChild(tile);

tileCoorX[tile.id] = xx;
tileCoorY[tile.id] = yy;
//tile.addEventListener("click", tileOnDown);
//also tried
tile.on("click", tileOnDown);
tempx -= 32;
tempy += 16;
}
tilex += 32;
tiley += 16;
}

You can download the project (help.zip).
Please help!
Thanks,
Anton
help.zip

Greg McLeod

unread,
Feb 20, 2018, 10:43:13 AM2/20/18
to CreateJS Discussion
Looking at your code, is this a 40x40 tile grid? That's up to 1600 event listeners!

If you want to make it more efficient, i recommend adding your tiles as children to a new Container, and putting a single event listener on the Container. You can then use simple math with the click coordinates to determine which tile was clicked based on your tile size (32x16). That should certainly have some improvement on your delay issue.

Sebastian DeRossi

unread,
Feb 20, 2018, 10:50:27 PM2/20/18
to CreateJS Discussion
I would agree with Greg, placing your tiles within a container and adding a click event listener on that container would be best. Then you can determine which tile was selected based on the event.target on the event handler.

Reply all
Reply to author
Forward
0 new messages