Why did I click on the top left corner of the 'goBtn' button but execute layer's 'pointerup' event?

Phaser 3
1

Why did I click on the top left corner of the ‘goBtn’ button but execute layer’s ‘pointerup’ event?

42BA080D-F6E6-4956-81D6-FDF0854A8F9C
68108146-f3c09900-ff21-11e9-86aa-0066fae89db5.png1172×700 26.7 KB 

<script src="https://cdn.jsdelivr.net/npm/phaser@3.20.1/dist/phaser-arcade-physics.min.js"></script>
<!--<script src="../../libs/phaser/phaser-3.19.0.min.js"></script>-->
<script>
  class StarDialog extends Phaser.GameObjects.Container {
    constructor(scene, x = 0, y = 0) {
      super(scene, x, y)
    }

    init() {
      let goBtn = this.scene.add.image(0, 0, "btn_go1.png").setInteractive()
      goBtn.on("pointerup", () => {
        console.log("pointerup goBtn")
      })
      this.add(goBtn)
    }
  }

  var game = new Phaser.Game({
    type: Phaser.AUTO,
    transparent: true,
    backgroundColor: 0x1099bb,
    scene: {
      preload: preload,
      create: create
    }
  });

  function preload() {
    this.load.image('btn_go1.png', './btn_go1.png')
  }

  function create() {
    let layer = this.add.container(0, 0)
    layer.name = 'layer'
    layer.setInteractive({
      hitArea: new Phaser.Geom.Rectangle(0, 0, 100, 100),
      hitAreaCallback: Phaser.Geom.Rectangle.Contains,
      cursor: "pointer",
      useHandCursor: false
    })
    layer.on('pointerup', () => {
      console.log('layer pointerup')
    })

    let dialog = new StarDialog(this, 100, 100)
    layer.add(dialog)
    dialog.init()
  }
</script>

btn_go1

2

Ideally, child of a container is above its parent(container), therefore it will catch the input event.
In your case, the input event are registered in child(goBtn) and, its parent-parent’s(layer), finally p3 engine ran to unknown result, .i.e. these code could not handle your case correctly. It is a p3 engine’s bug.
I could try to send a PR to solve it.

3

From the name of these two containers: dialog and layer. It seems that you are trying to build some ui components placed on a layer.
Here is a plugin for ui components. What kind of features would you expect for a layer object?

4

I’m going to scroll in the UI component, drag the content to scroll, and the content to scroll has buttons in it that can trigger events.(我要在UI组件里做滚动，拖动内容可以滚动，并且滚动的内容里还有按钮，按钮可以触发事件。)

5

Here is a demo of scrollable panel, with clickable (pointerdown event, line 228-233) button.
Reference document: Scrollable panel, Grid sizer, and Label.

6

I need to import the rexuiplugin.min.js (320kb) plugin to use this feature. Can you provide a separate plug-in to package the Scrollable panel function?(我要用这个功能需要引入rexuiplugin.min.js（320kb）插件太大了。可否提供单独打包‘Scrollable panel ’功能的插件？)

7

Sorry I could not provide customize exporting version of rexUI plugin.

To run that demo, user need scrollable panel, sizer, grid sizer, and label, round-rectangle plugins at least.

8

Copy folder plugins and templates into your project, then import required class like ScrollablePanel.js directly.
In this solution, you will use ui object class directly, instead of create ui object via creater methods. BTW, my ui object class is in ES6 style.

9

I just want to use one of the UI components, and if I can, I’d like to introduce features on demand to reduce the size of the project. Thank you. For example: https://element.eleme.io/#/en-US/component/quickstart - > On demand（我只想要使用其中一个UI组件，如果可以我希望有按需引入的功能，以达到减小项目体积的目的，谢谢。例如：https://element.eleme.io/#/en-US/component/quickstart -> On demand）

10

Yes, you can import each ui class individually.

  1. Create a sub-folder rexplugins in your project folder.
  2. Copy plugins and templates folder into sub-folder rexplugins.
  3. Import ScrollablePanel class via
    import ScrollablePanel from './rexplugins/templates/ui/scrollablepanel/ScrollablePanel.js';
  4. Use ScrollablePanel class
    1. Custom class
      class MyPanel extends ScrollablePanel  {
    constructor(scene, config) {
        super(scene, config);
        // ...
    }
    // ...
}
    2. Create instance
      var panel = new MyPanel(scene, config);
11

By that I mean you can use this module to provide on-demand import functionality when you install it through the “NPM install phaser3-rex-notes”. Instead of copying your project to mine.（我的意思是通过“npm install phaser3-rex-notes”安装您这个模块使用的时候可以提供按需引入功能。而不是把您的项目拷贝到我的项目。）

12

Once you add phaser3-rex-plugins into dependencies of package.json and install it. UI plugins will be put at ‘phaser3-rex-plugins/templates/ui/’. Import scrollable class via

import ScrollablePanel from 'phaser3-rex-plugins/templates/ui/scrollablepanel/ScrollablePanel.js';
13

Thank you for your

14

I use that dependencies to update my plugins, but this solution might not get latest version immediately after I updated plugins repo (fix a bug or add some features).
That why I suggest that coping repo directly instead of install repo by npm.

15

Yeah, I learned that too.（明白，我也学到了 哈哈。）