在看互動相關的屬性時，除了 interactive 外還有一個類似的 interactiveChildren

Demo 與實作後，覺得可把 interactiveChildren 當作進階設定，大部分情況下可不用更動，避免混亂。

前幾篇的 結論：因為繼承關係，可把可視物件當成容器再放入物件

物件本身在各類別所指：

• Sprite類別：使用的材質
• Text類別：文字
• Graphics類別：畫出來的圖

子物件：

• 物件透過 addChild(child) 加入的子物件，可透過 getChildAt()、getChildByName() 方法 取得子物件

interactive 與 interactiveChildren 屬性的預設值：

各種可視物件在產生出來的時候：

• interactive ：預設 false，讓物件本身可互動
• interactiveChildren ： 預設 true，讓物件的子物件可互動

interactiveChildren 設定為 true 時，其 children陣列 內子元件的互動效果才會觸發。
反之可透過父物件設定 interactiveChildren 一次取消子物件內的互動

[ Demo ]
結構： 命名為 testGraphic 的 Graphics實體 裡放入三個方塊

測試方式：
testGraphic 點了會顯示 testGraphic pointerdown，
方塊點了會顯示 方塊名 pointerdown

testGraphic.on('pointerdown', ()=>{
	console.log(`testGraphic pointerdown`);
});
box.on('pointerdown', ()=>{
    console.log(`${name} pointerdown`);
});

各種 interactive 與 interactiveChildren 的交叉測試

測試1：

• interactive：true
• interactiveChildren：true

點白色三角形：觸發 graphic 實體(父物件) 的互動事件

點方塊：

1. 觸發 方塊(子物件) 的互動事件
2. 觸發 graphic 實體(父物件) 的互動事件

測試2：

• interactive：true
• interactiveChildren：false

點白色三角形：觸發graphic 實體(父物件) 的互動事件

游標位置：此時感應到的是白色三角形，無視橘色方塊

點方塊(與三角形無交疊時)：無觸發事件

游標位置：此時離開白色三角形，無觸發事件

測試3：

• interactive：false
• interactiveChildren：true

點白色三角形：無觸發事件

游標位置：無觸發事件，滑鼠為預設

點方塊：觸發方塊(子物件) 的互動事件

游標位置：此時感應到方塊的互動事件，滑鼠改變

測試4：

• interactive：false
• interactiveChildren：false

點白色三角形：無觸發事件
點方塊：無觸發事件

容易混淆的地方：

把 Sprite、Text、Graphic 等類別當容器放入子元件，
且分開控制物件本身與子物件的互動行為
可行，但可能會遇到 互動控制(本篇討論)、深度 等...問題

我在專案中，習慣使用 Container類別 放入物件
並只使用 interactive，控制元件的互動

今日小節：

interactive：設定該物件本身可不可被互動
interactiveChildren：設定該物件 children陣列 裡的子物件可不可被互動

若父物件的 interactiveChildren 為 false 時，
即使子物件的 interactive 為 true，也不會觸發事件