./src/main.js

import Phaser from "phaser";
import GameScene from "./scenes/GameScene";

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 300,
    parent: 'game-container',
    backgroundColor: '#ffffff',
    scale: {
        mode: Phaser.Scale.NONE,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [
        GameScene
    ]
};

export default new Phaser.Game(config);

./src/scenes/GameScene.js

import { Scene } from 'phaser';
import Rect from '../objects/Rect'

export default class GameScene extends Phaser.Scene {

    constructor() {
        super('GameScene');
    }

    create() {
        const rect = new Rect(this, 100, 200);
    }
}

./src/objects/Rect.js

export default class Rect {
    constructor(scene, x, y) {
        const centerX = scene.scale.width / 2;
        const centerY = scene.scale.height / 2;
        const width = 200;
        const height = 200;

        const clickArea = scene.add.rectangle(centerX, centerY, width, height, 0x000000, 0); // 透明な矩形
        clickArea.setDepth(30);

        clickArea.setInteractive();
        clickArea.on("pointerdown", this.handleClick);
        scene.add.existing(clickArea);
    }

    handleClick(pointer, localX, localY) {
        console.log(`ClickX=${pointer.x}, Clicky=${pointer.y}\t画像内X=${localX}, 画像内Y=${localY}`);
    }
}