HTML5 Canvas: Move object to any clicked objects?

[Jeffery.Wright]

I want to add a  a highlight to indicate the last object clicked  without adding this to every object click:

this.Marker.y = this.navButton1.y;
this.Marker.x = this.navButton1.x;

According to Google AI this should do the trick: 

// Set the initial position of the object to move
var objectToMove = this;
objectToMove.x = 100;
objectToMove.y = 100;

// Add a click event listener to the target object
stage.addEventListener("click", handleTargetClick);

function handleTargetClick(event) {
  // Get the clicked object
  var target = event.target;

  // Make sure the clicked object is not the objectToMove
  if (target != objectToMove) {
    // Get the position of the target object
    var targetX = target.x;
    var targetY = target.y;

    // Set the objectToMove to the position of the target object
    objectToMove.x = targetX;
    objectToMove.y = targetY;

  }
}

So I added handleTargetClick(); to the click function for my navigation objects, altering the code above to indicate my Marker object: var objectToMove = this.Marker ;  but I get the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'target')

var target = event.target;

Shouldn't that code make the clicked object the target, to align the Marker to?

Any helpful hints welcome, thanks!

[kglad]

did you use that exact code?

[Jeffery.Wright]

Yes, other than the edit I mentioned above :  var objectToMove = this.Marker ;  which did move my mc object to x 100 and y 100 on init, so that worked.   

But the rest doesn't. Is there a better way to do this? Thanks. 

[JoãoCésar]

Hi.

Not sure of exactly what the issue is. Can you provide a visual example of what you have to do?

Regards,

JC

[Jeffery.Wright]

Sure,  I have a set of objects that are navigation buttons. Once one is clicked I want it highlighted to indicate that is the current active navigation selection/most recently clicked option - for visual cognitive reinforcement. 

Since these objects have various x and y coords that may change, I want a passive method to place a Marker on the object once the object is clicked., and avoid having to change the x and y of the objects position in the code... to save time and reduce dev complexity. Fewer things to worry about if I move the button object somewhere else if the layout changes. 

iow: Whatever the button object's x and y, the marker will change its location to the clicked object's coordinates, which is what the AI generated code appears to be attempting; the clicked object becomes the Target for the Marker to align to. 

Is the AI just making up a method that doesn't or can't exist? Is this possible at all?

Thanks!

[JoãoCésar]

Thanks for the image and info.

Assuming that:
- All buttons live inside the same container;
- The buttons are actual Button symbols or at least have ther mouseChildren property set to false;
- And that the highlight lives on the root timeline.

You can do something like:

var highlight = this.highlight; // the highlight is a instance lying somewhere in the root timeline

this.stop(); // this is important to make sure display list methods will work correctly

this.buttons.on("click", function(e) // this.buttons is the container for all the buttons
{
	e.target.addChild(highlight);
	highlight.x = 0;
	highlight.y = 0;
});