互動

PixiJS 主要是一個渲染系統，但它也包含互動支援。簡單地為你的專案新增對滑鼠和觸控事件的支援。

事件模式

取代 v6 中的 InteractionManager 的新事件系統已擴充套件容器具備互動性的定義。透過這樣的方式，我們引入了 eventMode，讓你可以控制物件回應互動事件的方式。這類似於 v6 中的 interactive 屬性，但有更多選項。

eventMode	說明
none	忽略所有互動事件，類似於 CSS 的 pointer-events: none，對於非互動子級的良好最佳化
passive	不發出事件，並忽略本身的點擊測試，但只允許其互動子級的事件和點擊測試。這是所有容器的預設 eventMode
auto	不發出事件，但如果父級是互動性的，就會進行點擊測試。與 v7 中的 interactive = false 相同
static	發出事件並進行點擊測試。與 v7 中的 interaction = true 相同，適用於不會移動的按鈕等物件。
dynamic	發出事件並進行點擊測試，但會額外接收從計時器發出的模擬互動事件，以允許在滑鼠沒有移動時進行互動。這適用於獨立移動或動畫的元素。

事件類型

PixiJS 支援以下事件類型

事件類型	說明
pointercancel	當指標裝置按鈕在最初註冊 pointerdown 的顯示物件外部釋放時觸發。
pointerdown	當指標裝置按鈕按下顯示物件時觸發。
pointerenter	當指標裝置進入顯示物件時觸發。
pointerleave	當指標裝置離開顯示物件時觸發。
pointermove	當指標裝置在顯示物件上移動時觸發。
globalpointermove	當指標裝置移動時觸發，無關乎目前物件的點擊測試。
pointerout	當指標裝置移出顯示物件時觸發。
pointerover	當指標裝置移至顯示物件上時觸發。
pointertap	當指標裝置在顯示物件上輕觸兩次時觸發。
pointerup	當指標裝置按鈕在顯示物件上釋放時觸發。
pointerupoutside	當指標裝置按鈕在最初註冊 pointerdown 的顯示物件外部釋放時觸發。
mousedown	當滑鼠按鈕在顯示物件上按下時觸發。
mouseenter	當滑鼠游標進入顯示物件時觸發。
mouseleave	當滑鼠游標離開顯示物件時觸發。
mousemove	當滑鼠游標在顯示物件上方移動時觸發。
globalmousemove	當滑鼠移動時觸發，無論是否擊中測試目前物件。
mouseout	當滑鼠游標移出顯示物件時觸發。
mouseover	當滑鼠游標移到顯示物件上時觸發。
mouseup	當滑鼠按鈕在顯示物件上釋放時觸發。
mouseupoutside	當滑鼠按鈕在原本註冊 mousedown 的顯示物件外釋放時觸發。
click	當滑鼠按鈕在顯示物件上按一下（按下並釋放）時觸發。
touchcancel	當觸控點從原本註冊 touchstart 的顯示物件外移除時觸發。
touchend	當觸控點從顯示物件移除時觸發。
touchendoutside	當觸控點從原本註冊 touchstart 的顯示物件外移除時觸發。
touchmove	當觸控點沿著顯示物件移動時觸發。
globaltouchmove	當觸控點移動時觸發，無論是否擊中測試目前物件。
touchstart	當觸控點放在顯示物件上時觸發。
tap	當觸控點在顯示物件上連點兩下時觸發。
wheel	當滑鼠滾輪在顯示物件上轉動時觸發。
rightclick	當滑鼠右鍵在顯示物件上點一下（按下並釋放）時觸發。
rightdown	當滑鼠右鍵在顯示物件上按下時觸發。
rightup	當滑鼠右鍵在顯示物件上釋放時觸發。
rightupoutside	當滑鼠右鍵在原本註冊 rightdown 的顯示物件外釋放時觸發。

啟用互動

任何繼承自 Container 的物件（Sprite、Container 等），只要將其 eventMode 屬性設定為以上所列的任何 eventModes，就能變得具有互動性。這麼做會讓物件發出互動事件，可以回應這些事件來驅動專案行為。

查看互動範例程式碼。

若要回應點擊和輕觸，請繫結到物件上觸發的事件，如下所示

let sprite = Sprite.from('/some/texture.png');
sprite.on('pointerdown', (event) => { alert('clicked!'); });
sprite.eventMode = 'static';

查看Container以取得受支援的互動事件清單。

檢查物件是否具有互動性

您可以透過呼叫 isInteractive 屬性來檢查物件是否具有互動性。如果 eventMode 設定為 static 或 dynamic，將會傳回 true。

if (sprite.isInteractive()) {
    // sprite is interactive
}

使用指標事件

PixiJS 支援三種類型的互動事件：滑鼠、輕觸和指標。滑鼠事件是由滑鼠移動、點擊等動作觸發。輕觸事件是為具有觸控功能的裝置觸發。指標事件則會同時觸發。

這表示，在許多情況下，您可以編寫專案來使用指標事件，而無論使用滑鼠或輕觸輸入，它都可以正常運作。因此，使用非指標事件的唯一原因是根據輸入類型支援不同的操作模式或支援多重輕觸互動。在其他所有情況下，建議優先使用指標事件。

最佳化

需要偵測點擊，就得檢查整個物件樹，這在複雜的專案裡會變成最佳化瓶頸。為了緩解此問題，PixiJS衍生的容器物件有一項名為interactiveChildren的屬性。如果你有包含複雜子樹的容器或其他物件，而且你知道它們永遠不會是互動式的，就可以把此屬性設為false，而點擊測試演算法在檢查滑鼠移到上面和點擊事件時，就能略過這些孩子。舉例來說，如果你在建構一個橫向卷軸遊戲，你可能會想把背景層的background.interactiveChildren = false設為你的背景層，包含岩石、雲、花朵等等。這麼做會因為背景層包含許多不可點擊的子物件而大幅加速點擊測試的速度。

較高的EventSystem效能，也可以自訂化

const app = new Application({
    eventMode: 'passive',
    eventFeatures: {
        move: true,
        /** disables the global move events which can be very expensive in large scenes */
        globalMove: false,
        click: true,
        wheel: true,
    }
});