圖片來源：梗圖倉庫
字是我上的，哈姆派郎。

本篇續紀錄鼠輩之不可思議事件：wheel。

事件其十四：wheel

此事件於鼠輩中央頭頂處之鼠輪滾動時發生，或其他能模擬相似之功能之工具，例如於人指拭於觸控板之行為。

規範原文：
A user agent MUST dispatch this event when a mouse wheel has been rotated around any axis, or when an equivalent input device (such as a mouse-ball, certain tablets or touchpads, etc.) has emulated such an action.

以下示例針對滾輪元素進行wheel事件之觀測，函式之術為鼠輩於鼠之宅中之滾輪滾動鼠輪時，能於滾輪上奔跑嬉戲：

const roller = document.querySelector(".roller");

let angle = 0;

function rotateRoller(event) {
  angle++;
  this.style.transform = `rotate(${angle * 100}deg)`;
}

roller.addEventListener("wheel", rotateRoller);

分段註釋如下：
選取滾輪元素。

const roller = document.querySelector(".roller");

定義函式之術名rotateRoller，內容為轉動滾輪。
定義變數angle初始值為0，當滾輪應轉動時增加轉動角度。

let angle = 0;

function rotateRoller() {
  angle++;
  this.style.transform = `rotate(${angle * 100}deg)`;
}

設定事件觀測器針對滾輪進行wheel事件之觀測，並施以rotateRoller函式之術。

roller.addEventListener("wheel", rotateRoller);

可見鼠輩進入鼠之宅之滾輪後，依照鼠輪滾動之速率奔行之畫面。

圖片無法展示鼠輩如雷之奔馳，請參考示例處

wheel事件之預設行為為捲動超過顯示範圍之元素。因此若是在鼠之宅外列出介紹倉鼠之人工智慧拼湊之字符，使其超過當前顯示範圍時，鼠輪滾動時將優先捲動元素，而無法僅滾動鼠之宅之滾輪。

因此可將函式之術rotateRoller之內容改造，施以event.preventDefault()術法防止wheel事件之預設行為。

function rotateRoller(event) {
  event.preventDefault();
  angle++;
  this.style.transform = `rotate(${angle * 100}deg)`;
}

當鼠輩於滾輪滾動鼠輪時可於滾輪玩耍，當鼠輩於其他處滾動鼠輪時捲動元素。

抑或搭配wheel事件之ctrlKey屬性，當鍵石ctrl受力之同時滾動鼠輪，才可於滾輪中玩耍，否則皆為捲動元素。

function rotateRoller(event) {
  if (event.ctrlKey === true) {
    event.preventDefault();
    angle++;
    this.style.transform = `rotate(${angle * 100}deg)`;
  }
}

示例處

示例之術式

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

翻譯

鼠輩：滑鼠
中央頭頂處之鼠輪：滾輪
鍵石：鍵

相關連結

• wheel - w3.org