React

HTML

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.19.0/phaser-arcade-physics.js" integrity="sha256-yTT/0QrXPp7FyNsfqvDFnZHevD7FoBI3+U/m/Nmvwak=" crossorigin="anonymous"></script>

CSS

body {
  margin: 0;
  padding: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

#game {
  position: absolute;
}

.ui-overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(100, 100, 200, 0);
}

canvas {
  width: 100vw;
  height: 100vh;
}

React

class App extends React.Component {
	render() {
    return <React.Fragment>
      <div id="game"
        onPointerDown={() => console
        .log("Game: Pointer Down")}
        onPointerMove={() => console
        .log("Game: Pointer Move")}
        onPointerUp={() => console
        .log("Game: Pointer Up")}
      ></div>
      <div className="ui-overlay" 
        onPointerDown={() => console
        .log("Overlay: Pointer Down")}
        onPointerMove={() => console
        .log("Overlay: Pointer Move")}
        onPointerUp={() => console
        .log("Game: Pointer Up")}
      ></div>
    </React.Fragment>
  }
}

window.onload = function() {
  let div = document.querySelector("#app"); 
	ReactDOM.render(<App />, div)

  const config = {
    parent: "game",
    width: innerWidth,
    height: innerHeight,
    scale: {
      mode: Phaser.Scale.RESIZE,
      autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: { create }
  }
  const game = new Phaser.Game(config)

  function create() {
		let image = this.add.image(0, 0, '-')
    .setOrigin(0, 0).setDisplaySize(100, 100)
    image.setInteractive()
    image.on('pointerdown', () => 
    console.log("Image: Pointer Down"))
    .on('pointermove', () => 
    console.log("Image: Pointer Move"))
    .on('pointerup', () =>
    console.log("Image: Pointer Up"))
  }
  
}