Element: click 事件
Baseline 廣泛可用 *
當發生以下任何情況時，元素會收到一個 click 事件：
- 當指標位於元素內部時，按下並釋放指向裝置按鈕（例如滑鼠主按鈕）。
- 在元素上執行觸控手勢。
- 任何等同於點選的使用者互動，例如當元素處於聚焦狀態時按下 Space 鍵或 Enter 鍵。請注意，這僅適用於具有預設鍵盤事件處理程式的元素，因此，不包括透過設定
tabindex屬性使其可聚焦的其他元素。
如果在某個元素上按下按鈕，然後指標在按鈕釋放之前移到該元素之外，則事件將在包含這兩個元素的最具體的祖先元素上觸發。
click 事件在 mousedown 和 mouseup 事件（按此順序）觸發之後觸發。
該事件是一個與裝置無關的事件——這意味著它可以透過觸控、鍵盤、滑鼠以及輔助技術提供的任何其他機制來啟用。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("click", (event) => { })
onclick = (event) => { }
事件型別
一個 PointerEvent。繼承自 MouseEvent。
注意： 在規範的早期版本中，此事件的事件型別是 MouseEvent。有關更多資訊，請檢視瀏覽器相容性。
事件屬性
此介面繼承自 MouseEvent 和 Event 的屬性。
PointerEvent.altitudeAngle只讀 實驗性-
表示感測器（指標或手寫筆）軸與裝置螢幕的 X-Y 平面之間的角度。
PointerEvent.azimuthAngle只讀 實驗性-
表示 Y-Z 平面與包含感測器（指標或手寫筆）軸和 Y 軸的平面之間的角度。
PointerEvent.pointerId只讀-
導致事件的指標的唯一識別符號。
PointerEvent.width只讀-
指標接觸幾何的寬度（X 軸上的大小），以 CSS 畫素為單位。
PointerEvent.height只讀-
指標接觸幾何的高度（Y 軸上的大小），單位為 CSS 畫素。
PointerEvent.pressure只讀-
指標輸入在
0到1範圍內的歸一化壓力，其中0和1分別表示硬體能夠檢測到的最小和最大壓力。 PointerEvent.tangentialPressure只讀-
指標輸入（也稱為筒壓或圓柱應力）在
-1到1範圍內的歸一化切向壓力，其中0是控制的中間位置。 PointerEvent.tiltX只讀-
Y-Z 平面與包含指標（例如筆手寫筆）軸和 Y 軸的平面之間的平面角（以度為單位，範圍為
-90到90）。 PointerEvent.tiltY只讀-
X–Z 平面與包含指標（例如，筆尖）軸和 X 軸的平面之間的平面角度（以度為單位，範圍為
-90到90）。 PointerEvent.twist只讀-
指標（例如筆手寫筆）圍繞其主軸的順時針旋轉角度，以度為單位，值為
0到359。 PointerEvent.pointerType只讀-
指示導致事件的裝置型別（滑鼠、筆、觸控等）。
PointerEvent.isPrimary只讀-
指示此指標是否表示此指標型別的主要指標。
用法說明
傳入 click 事件處理程式的 PointerEvent 物件的 detail 屬性設定為 target 被點選的次數。換句話說，對於雙擊，detail 將為 2；對於三擊，將為 3，依此類推。此計數器在短時間沒有發生任何點選後重置；該間隔的具體時長可能因瀏覽器和平臺而異。該間隔也可能受使用者偏好影響；例如，輔助功能選項可能會延長此間隔，以使透過自適應介面執行多次點選更容易。
示例
此示例顯示了 <button> 上的連續點選次數。
HTML
<button>Click</button>
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
button.textContent = `Click count: ${event.detail}`;
});
結果
嘗試快速、重複地點選按鈕以增加點選次數。如果您在兩次點選之間休息，計數將重置。
規範
| 規範 |
|---|
| UI 事件 # event-type-click |
| HTML # handler-onclick |
瀏覽器相容性
載入中…