Click Events doesn't work on elements inside list

mattcolman / phaser-list-view

List view class for Phaser. Great for high scoreboards.

http://mattcolman.com/labs/phaser-list-view/index.html

MIT License

115 stars 21 forks source link

Click Events doesn't work on elements inside list #14

Closed QuipHop closed 7 years ago

QuipHop commented 7 years ago

Hi I'm trying to add click event on the item inside list and this event won't fire my code :

            let parent = modalGroup; //phaser group
            let bounds = new Phaser.Rectangle(10, header.bottom, this.game.world.width - 30, this.game.world.height - 150);
            let options = {
                direction: 'y',
                overflow: 50,
                padding: 10
            }
            let listView = new Scroller.ListView(this.game, parent, bounds, options)

            EquimpentSheet.forEach((e, i)=>{
                let bg = this.game.add.graphics(bounds.x, bounds.top + 110 * i);
                bg.beginFill(0xbfbdb3);
                bg.drawRect(0, 0, this.game.world.width - 20, 100);
                bg.anchor.setTo(0.5);
                bg.inputEnabled = true;
                bg.events.onInputDown.add(()=>{
                    this.player.buyItem(e);
                });
                modalGroup.add(bg);
                listView.addMultiple(bg);
                bg.endFill();
            });

QuipHop commented 7 years ago

UPDATE: Click will fire if make click on the parent where item is overflowed

QuipHop commented 7 years ago

Ok, i've found solution According to Your example from http://mattcolman.com/labs/phaser-list-view/index.html I've moved out text to the img child and give it's input.priorityID to 9999;

drewsilcock commented 7 years ago

For those looking at this now, the solution for ListView is passing in the optionSearchForClicks set to true. This means that the ListView checks for onInputDown and onInputUp events if you only click (don't drag) on the list view. Took me a while to figure this out, so just posting for future reference in case anyone else is looking for such an answer. Example code:

const options = {
    direction: "y",
    overflow: 200,
    padding: 100,
    searchForClicks: true,
};

const listView = new ListView(this.game, parent, bounds, options);
listView.addMultiple(...items);