Parent onclick event handler triggers when element clicked

[developgame]

Hi Everyone:
Thank you for any help , suggestions, insight into what I am doing wrong!
Just another newbie question

I am creating escape " escape the curse of the temple" https://studio.boardgamearena.com/gamepanel?game=escape
This game, any number of meeples can enter a chamber. Players can then select the meeple( s) they help and work with

Problem : after meeples choose "Enter A Chamber" and in selected chamber, players cannot select theirs or other meeples in the chamber without first refreshing the screen.

example: I and my mate have moved from the start chamber to an adjacent chamber.
Then I select "Remove Black Mask Spell" so needs to select meeple to remove black mask dice from ,
onSelectMeeple , the meeple event handler, should trigger.
instead onSelectChamber, the parent event handler, is triggered

This is what console.log gives.

in onRemoveDiceSpell
escape.js?1630879955749:1263 in onSelectChamber event.currentTarget.id is chamber_5 event.target.id is meeple_2323324

Here is how my code is laid out.

Code: Select all

setup: function( gamedatas )  {
	for ( var i in this.gamedatas.tiles_display )	{
		var tile_to_display = this.gamedatas.tiles_display[i] ;
		var tile_id = "chamber_"+ tile_to_display.card_id;		
	   	dojo.connect( $( tile_id ), 'onclick', this, 'onSelectChamber' );   			
	}
    var meeple_id = "meeple_" + player_id;
	var place_meeple = $('chamber_' + player.meeple_place );
    dojo.place( this.format_block( "jstpl_meeple", 	{  'id' : meeple_id	}), place_meeple );		
	dojo.connect( $( meeple_id ), 'onclick', this, 'onSelectMeeple' );   
  
},

// actions that user chooses
onEnter: function( evt ) {
	dojo.addClass(  chamber_nodeid, 'selected' );
},

onRemoveDiceSpell: function( evt ) {
	denizens = dojo.query( current_chamber ).query( '.meeple' ).addClass( 'selected' );
},
				
// event handlers
onSelectMeeple: function( event ) {
	console.log( " in onSelectMeeple evt curruent id  is  " + event.currentTarget.id + " event.target.id is " + event.target.id );
	dojo.stopEvent(event);
			...
},

onSelectChamber: function( event )  {
	console.log( " in onSelectChamber evt curruent id  is  " + event.currentTarget.id + " event.target.id is " + event.target.id );
	dojo.stopEvent(event);
	if ( dojo.hasClass( $( chamber_selected ), 'selected' )) {
		dojo.place( this.format_block( "jstpl_meeple", 	{   'id' : this.player_id}), selected_chamber );
	}
},	
	

[Tisaac]

What are using to move meeple across tiles ?

[developgame]

What are using to move meeple across tiles ?

Thanks for your reply, Tisaac

The player selects chamber by clicking the chamber they want to move their meeple to. The chamber on click event handle , onSelectChamber, moves the meeple to the selected chamber.
The meeple is connected to this.player_id - player whose browser the code is running.

[Tisaac]

What are using to move meeple across tiles ?

Thanks for your reply, Tisaac

The player selects chamber by clicking the chamber they want to move their meeple to. The chamber on click event handle , onSelectChamber, moves the meeple to the selected chamber.
The meeple is connected to this.player_id - player whose browser the code is running.

You didn't answer my question :p I was asking specifically for the technical part of moving the meeple.
The reason is that depending on what function you are using, it might actually remove all existing event listener of the object, which could explain your issue.

[developgame]

What are using to move meeple across tiles ?

Thanks for your reply, Tisaac

The player selects chamber by clicking the chamber they want to move their meeple to. The chamber on click event handle , onSelectChamber, moves the meeple to the selected chamber.
The meeple is connected to this.player_id - player whose browser the code is running.

You didn't answer my question :p I was asking specifically for the technical part of moving the meeple.
The reason is that depending on what function you are using, it might actually remove all existing event listener of the object, which could explain your issue.

Thanks Tisaac!
I really apreicate your help!
It worked. Yes!
I am using dojo.place to move the meeple
I added an eventlistener after I moving the meeple . The problem is fixed! Thanks!

Code: Select all

			dojo.place( this.format_block( "jstpl_meeple", 
				{ 'color' : player_info.color , 
				  'id' : meeple_id
				}), selected_chamber );		
			dojo.connect( $( meeple_id ), 'onclick', this, 'onSelectMeeple' );