點擊事件(Click events)

當一個Visual Element被滑鼠左鍵(或點擊裝置(pointing device)的第一個按鈕)點擊，將觸發一個Click Event。進行點擊操作的Visual Element會觸發Pointer Down Event與Pointer up Event。此外Click Event也可以檢測到非按鈕Visual Element的點擊，例如Toggle control便是使用了Click Event來處理顯示，隱藏勾號(check mask)並改變control的值。

Event	描述	Trickles down	Bubbles up	Cancellable
ClickEvent	當滑鼠左鍵點擊時，就會觸發一個Click Event	✔	✔	✔

註冊Click Event

// 使用RegisterCallback註冊ClickEvent，同時還傳入一個VisualElement參數
// 這個asset是當click event被觸發之後，要關閉的element
btnClose.RegisterCallback<ClickEvent, VisualElement>(Clicked, asset); 

private void Clicked(ClickEvent evt, VisualElement root)
{
  root.ShowVisualElement(false); 
}

例子：以下例子示範如何使用Click Event讓一個visual element在被點擊之後將原有顏色，替換為另一個新的顏色。

1. 在Assets > Scripts > Editor 下建立一個 C# Script ClickEventExampleWindow.cs
   
2. 將以下程式碼複製到剛剛建立的C# Script中

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   
   public class ClickEventExampleWindow : EditorWindow
   {
     // 這個Attributes會在 Windows -> UI Tollkit 下加入一個 ClickEventExample
     [MenuItem("Window/UI Toolkit/ClickEventExample")]
     public static void ShowExample()
     {
       var wnd = GetWindow<ClickEventExampleWindow>();
       wnd.titleContent = new GUIContent("Click Event Example");
     }
   
     public void CreateGUI()
     {
       // 建立四個不同顏色的box
       for (int i = 0; i < 4; i++)
       {
         // 為這些Visual Element設定隨機的background顏色
         var newBox = new VisualElement() { style = { flexGrow = 1, backgroundColor = GetRandomColor() } };
         rootVisualElement.Add(newBox);
   
         // 為這個Element註冊一個ClickEvent callback
         newBox.RegisterCallback<ClickEvent>(OnBoxClicked);
       }
     }
   
     // 這個callback會改變target的Background color。
     private void OnBoxClicked(ClickEvent evt)
     {
       // 只在taget階段執行這個callback
       if (evt.propagationPhase != PropagationPhase.AtTarget)
         return;
   
       // 設定新的Background color
       var targetBox = evt.target as VisualElement;
       targetBox.style.backgroundColor = GetRandomColor();
     }
   
     private Color GetRandomColor()
     {
       return new Color(Random.Range(0, 1f), Random.Range(0, 1f), Random.Range(0, 1f));
     }
   }

3. 在Unity編輯器中找到 Window > UI Toolkit > ClickEventExample
   
4. 觀看結果
   

Reference: https://docs.unity3d.com/Manual/UIE-Click-Events.html