Adding onClick to DOM Element

Phaser 3
1

Hey I’m trying to add a function to a DOM element that I have placed to a scene, but it doesn’t seem like the created element allows me to do that: "property onClick does not exist on ‘domElement’:

const domElement = this.add.dom(420, 60).createFromHTML(someHTML);
domElement.setInteractive();
domElement.on('pointerdown', domElement.onClick(this.meteorGameData.gameElements[0].onClick));

What would be the best way to add onClick functionality to DOM Elements in a phaser scene?

2

If anyone is interested this is how I solved it:

const pulledHTML = this.meteorGameData.gameElements[0].html;
const pulledClickFunc = this.meteorGameData.gameElements[0].onClick;
const domElement = this.add.dom(420, 60).createFromHTML(pulledHTML);
domElement.addListener('click');
domElement.on('click', pulledClickFunc);
1 Like
3

I tried creating a simple rectangle that was the size of my game window, and I added the ‘click’ listener, but I had no luck. When I clicked the created rectangle, the only thing that happened was in the scene: if I clicked on a button in my scene, the button did what it was supposed to do, as if the DOM rectangle wasn’t even triggering an input event at all. Any idea why this might be?
(Please forgive the formatting; I didn’t know how to put my code in a gray box like yours; how did you do that, by the way?)
const dom : Phaser.GameObjects.DOMElement = this.add.dom(600, 675/2, “div”, “background-color: black; width: 1200px; height: 675px; font: 48px Arial”);
dom.addListener(“click”);
dom.setInteractive();
dom.alpha = 0.2;
dom.on(“click”, function()
{
console.log(“dom clicked”);
});

4

Here’s how to do the cool code formatting: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting

I’m not 100% sure, but I think there’s no way to prevent you from clicking things in your scene by having a DOM element on top

Also if I had to guess you might need to call dom.setInteractive(); before you call dom.addListener(“click”);