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

[Anton Khakhalin]

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

[Greg McLeod]

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]

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.

Have a look at this: https://codepen.io/derossi_s/pen/paVgzo