How to react to clicks that don't hit foreground objects?

[openandshut]

I want my game to have a mid- or background that has the world in it, and then some foreground objects. If the player clicks on a foreground object, then that should be handled one way, but if the player clicks within the canvas without hitting a foreground object then that should be handled another way. So my question is, does Pixi provide a nice way of going about this?

What I've tried:
 

// Method 1
const world = new PIXI.Container();
world.interactive = true
world.hitArea = new PIXI.Rectangle(0, 0,
    this.app.stage.width, this.app.stage.height);
world.on('pointerdown', () =>
    console.log('hit'));

this.app.stage.addChild(world);

// Method 2
this.app.renderer.plugins.interaction.on('pointerdown',
    () => console.log('mouse is down'));

 

I thought that there might be a way to create a container that only fires if a child objects of a different container weren't hit (these child objects being the foreground objects), but method 1 isn't firing the callback.

Method 2 fires the callback but I'm not sure how to go from there to checking if a foreground object was hit. It occurs to me that I could have a global boolean that sets whenever a card is clicked, but that seems hacky and prone to breakage.