Particles push interaction

[ShakeShakeFake]

Hello! I use tsparticles for Angular. I have a page with particles in the background and with many buttons and different elements on it.

When I click on these buttons and elements (different divs) I get new particle created, this behavior is unwanted. Is there a way to make particles being created only on empty space click? Setting event.stopPropagation() on buttons doesn't help. Maybe I need to somehow override the click event handler? I tried to use Container's addClickHandler, but it doesn't override the default handler, just adds a new one, as far as I understand.

I use this configuration:

this.ngParticlesService.init(async (engine: Engine) => {
  await loadExternalPushInteraction(engine, false);
  await loadExternalRepulseInteraction(engine, false);
  await loadParticlesLinksInteraction(engine, false);
  await loadBasic(engine, false);
});

particlesLoaded(container: Container): void {
}

and options are set like this

interactivity: {
    detect_on: 'window',
    events: {
      onClick: {
        enable: true,
        mode: 'push',
      }, ...

Thank you!

[matteobruni]

(change detect_on in detectsOn, detect_on was removed in v3, deprecated in v2)

detectsOn: "canvas" will fix your issue

[ShakeShakeFake]

Wow, thank you very much for really quick response! Yes, that works! I set to detectsOn: InteractivityDetect.canvas.