Click here to Skip to main content
15,891,713 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 22:13pm

1 solution

The target (currentTarget) of the event is the element you are looking for...
 
Share this answer
 
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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900