Click here to Skip to main content
14,387,650 members
Rate this:
Please Sign up or sign in to vote.
I'm trying to detect wich canvas and sprite is when click event occurs.

What I have tried:

In my html:

<div class="pixiTestBox">
  <!-- here i will append one app view (canvas)  -->
</div>


<div class="pixiTestBox2">
   <!-- here i will append another app view (canvas)  -->
</div>


In my js:

//NOTE: When document is loaded, calls automatically `pixiSetup()` and `pixiSetup2()`
pixiSetup()
{
	//creates and append the "app.view" to div.pixiTestBox

	var ctx = document.querySelector(".pixiTestBox");
	var app = new PIXI.Application(800, 600,
	{
		backgroundColor: 0x1099bb
	});
	ctx.appendChild(app.view);

	// create a new Sprite from an image path
	var bunny = PIXI.Sprite.fromImage('images/user.png');

	// center the sprite's anchor point
	bunny.anchor.set(0.5);

	app.stage.addChild(bunny);


	// Pointers normalize touch and mouse
	app.renderer.plugins.interaction.on('pointerup', canvasOnClickHandler);

	//Set element react on click
	bunny.interactive = true;
	bunny.on('pointerdown', drawedElementClicked);
}

pixiSetup2()
{
	//creates and append the "app.view" to div.pixiTestBox2

	var ctx = document.querySelector(".pixiTestBox2");
	var app = new PIXI.Application(800, 600,
	{
		backgroundColor: 0x1099bb
	});
	ctx.appendChild(app.view);

	// create a new Sprite from an image path
	var bunny = PIXI.Sprite.fromImage('images/user.png');

	// center the sprite's anchor point
	bunny.anchor.set(0.5);

	app.stage.addChild(bunny);

	// Pointers normalize touch and mouse
	app.renderer.plugins.interaction.on('pointerup', canvasOnClickHandler);

	//Set element react on click
	bunny.interactive = true;
	bunny.on('pointerdown', drawedElementClicked);
}



function canvasOnClickHandler(event)
{

	//How can i get here if the canvas that was clicked was the one inside of div class="pixiTestBox" or div class="pixiTestBox2"?

} //canvasOnClickHandler


function drawedElementClicked(event)
{

	//How can i get here wich sprite was clicked? 

} //drawedElementClicked


How can i accomplish what is in canvasOnClickHandler() and drawedElementClicked()?
Posted
Updated 30-Jun-18 23:13pm

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

The target (currentTarget) of the event is the element you are looking for...
   
Comments
Member 13892308 1-Jul-18 16:47pm
   
Tried this: console.log("event.currentTarget: " + event.currentTarget);
And it logs: event.currentTarget: [object Object]

So how can i get any valid information from this object?
Kornfeld Eliyahu Peter 1-Jul-18 16:55pm
   
Use the debugger, Luke!
Member 13892308 2-Jul-18 4:25am
   
Wich debugger? Im using chrome dev tools
Kornfeld Eliyahu Peter 2-Jul-18 4:30am
   
Than Chrome's debugger...
https://developers.google.com/web/tools/chrome-devtools/javascript/
Richard Deeming 3-Jul-18 10:16am
   
Try:
console.log("event.currentTarget", event.currentTarget);

Note the , instead of the + - you need to pass the object as a separate argument, rather than converting it to a string.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100