若將兩者錯放，極尷尬也。

圖片來源：我
每個倉鼠屁屁都是極品。

本篇將紀錄前篇提及之鼠輩事件button屬性。

鼠輩事件之button屬性

與點按鼠輩及放開鼠輩相關之鼠輩事件，其button屬性之值表此事件是由何點按處所觸發。

規範原文：
During mouse events caused by the depression or release of a mouse button, button MUST be used to indicate which pointer device button changed state.

不同點按處觸發鼠輩事件，其與button屬性之值之關係如下：
值為0，表主要點按處，通常為左處
值為1，表輔助點按處，通常為中央頭頂處，附有滾動功能
值為2，表次要點按處，通常為右處
值為3，表側邊控制處，通常為上一步控制處
值為4，表側邊控制處，通常為下一步控制處

以下示例將借用他人之意識介面 (滑鼠按鍵測試網站)，觀察鼠輩事件button屬性之值。藉由介面顯示之鼠輩點按處，可得知此點按處與button屬性之值之關聯。

首先確認此介面可正確偵測當下點按鼠輩的點按處。

確認完畢。是隻健康的鼠輩。
觀察介面之測試框元素。

取得測試框元素。

const testArea = document.querySelector("#mouse-container");

並於測試框設定事件觀測器，觀測mousedown事件後於操術板印出事件之button屬性。

testArea.addEventListener("mousedown", (event) => {
  console.log(event.button);
});

可確認鼠輩點按處與button屬性之值之關聯確實如上述所紀錄之。

需注意若是與點按鼠輩及放開鼠輩無關之鼠輩事件，其button屬性之值不會被更新，值仍為0。因此button屬性之值為0不一定代表鼠輩之主要點按處受到點按。

於測試框設定另一事件觀測器，觀測mousemove事件後於操術板印出事件之button屬性。

testArea.addEventListener("mousemove", (event) => {
  console.log(event.button);
});

鼠輩於測試框移動時，於操術板皆印出0，然而介面並無顯示鼠輩之左處遭受點按，因此使用button屬性時需謹慎為之。

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day12

翻譯

鼠輩：滑鼠
點按處：按鍵
左處：左鍵
右處：右鍵
中央頭頂處：滾輪按鈕
側邊點按處：側鍵、多功能鍵
意識介面：網站

相關連結

• button - w3.org
• 滑鼠按鍵測試網站