Can't trigger events on GameCanvas externally?

I have noticed that if player has clicked on the canvas certain events does not fire.

For example if player has clicked on the canvas he can not zoom the game with Ctrl+/-, or using a Ctrl + mouse scroll.

Is this a bug in Cocos Creator?

What I tried to do was to put a layer over the canvas. And use it to filter out event that goes into the canvas.

My page looks like:

 <div id="overlay"> </div> 
  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>

The overlay has following style

 #overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 200; /* above all other elements */

}

as you can see overlay will sit over everything else. The idea is to prevent events going directly into canvas.

$(document).on({
	keydown:keyEvent,
		keyup:keyEvent,
	  mousedown: documentEvent,
	  mouseup: documentEvent,
	  click:documentEvent,
	  mousemove:documentEvent,
	});
	
function documentEvent(e)
{
	$( "#GameCanvas" ).triggerHandler(e );
}

As you can see I capture events on the document and then fire it back into “GameCanvas”.
If I have a button in the game, I expected it would get clicked.

But it does not. Why?

Can someone kindly provide some help on fixing this issue?