Phaser resize events + input events question

[arcadedice]

Hi, I've searched the forum and couldn't really find an answer for this, so here is my question. In short is there a way to resize click regions for mouse events after you resize your canvas?

A bit of explanation. I have built an interactive map, where the user can click a region and highlight it green, the problem occurs when I shrink the browser and try to click on different regions.

It appears that even though I shrunk the map, the click regions still remain the same size (See example image). For instance I can click to the right of a region and still capture its event.

Any help with this would be greatly appreciated. I've attached a snippet of my resize code and can provide more examples on request. thanks

 

handleResize: function handleResize(event) {
            this.parentDiv = document.getElementById('world-map');
            this.parentWidth = this.parentDiv.offsetWidth;
            this.parentHeight = this.parentDiv.offsetHeight;

            console.log('this.parentWidth, this.parentHeight: ', this.parentWidth, this.parentHeight);

            // this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE; // Breaks other functionality

            // Resize the canvas
            $('canvas').width(this.parentWidth);
            $('canvas').height(this.parentHeight);

            // Resize the game
            this.game.width = this.parentWidth;
            this.game.height = this.parentHeight;

            // Refresh the game scale
            this.game.scale.refresh();

        },