然倉鼠喜獨居，須一鼠一籠飼養之。

圖片來源：抖音
非必要不接觸抖音，但把倉鼠當衛生紙實在太邪魔歪道了...

本篇續紀錄鼠輩之不可思議事件：dblclick、auxclick與contextmenu。

事件其十一：dblclick

此事件應為鼠輩次常發生之事件，於點按且放開鼠輩共兩次時發生。且如同click事件，只有鼠輩之主要點按處可以觸發dblclick事件。

規範原文：
A user agent MUST dispatch this event when the primary button of a pointing device is clicked twice over an element.
As with the click event, the dblclick event should only be fired for the primary pointer button. Secondary buttons MUST NOT fire dblclick events.

以下示例模擬鼠輩敲擊鼠之宅門，問候可愛鼠小七。

const door = document.querySelector(".door");
const seven = document.querySelector(".seven");

function openDoor() {
  door.style.transform = `rotateY(120deg)`;
  seven.style.transform = `scale(1)`;
}

door.addEventListener("dblclick", openDoor);

分段註釋如下：
選取鼠之宅門及可愛鼠小七元素。

const door = document.querySelector(".door");
const seven = document.querySelector(".seven");

定義函式之術名openDoor，內容為將門以rotateY之方式旋開，並使可愛鼠小七探出宅外。

function openDoor() {
  door.style.transform = `rotateY(120deg)`;
  seven.style.transform = `scale(1)`;
}

對鼠之宅門元素設定事件觀測器以觀測dblclick事件，並施以openDoor函式之術。

door.addEventListener("dblclick", openDoor);

鼠輩經過兩次點按且放開後可成功開啟鼠之宅門並問候可愛鼠小七。

鼠之宅

dblclick事件與其他不可思議事件之糾葛

dblclick事件必發生於click事件其後，抑或於mouseup事件其後。

規範原文：
This event type MUST be dispatched after the event type click if a click and double click occur simultaneously, and after the event type mouseup otherwise.

事件其十二：auxclick

先前紀錄click及dblclick事件皆僅發生於鼠輩之主要點按處，若是鼠輩之其他點按處，則需觀測auxclick事件。意即auxclick事件於點按且放開鼠輩之其他點按處發生。

規範原文：
The auxclick event type MUST be dispatched on the topmost event target indicated by the pointer, when the user presses down and releases the non-primary pointer button, ...

auxclick事件與其他不可思議事件之糾葛

與click事件相同，auxclick事件可能晚於mousedown及mouseup事件發生之時。

規範原文：
The auxclick event MAY be preceded by the mousedown and mouseup events on the same element, ...

事件其十三：contextmenu

在此紀錄最後一鼠輩之不可思議事件。此事件發生於環境選單 (context menu) 即將出現之前，環境選單通常於點按鼠輩右處後出現。

規範原文：
A user agent MUST dispatch this event before invoking a context menu.

contextmenu事件與其他不可思議事件之糾葛

當contextmenu事件由點按鼠輩右處後觸發，contextmenu事件則必於mousedown事件後發生。

規範原文：
When the contextmenu event is triggered by right mouse button, the contextmenu event MUST be dispatched after the mousedown event.

以下示例則利用contextmenu與auxclick事件防止並譴責人類偷竊可愛鼠小七之行為。

定義函式之術名showWarning，內容為當鼠輩右處觸發事件後，跳出警告。

function showWarning(event) {
  if (event.button === 2) {
    alert("你個偷鼠賊！");
  }
}

對可愛鼠小七元素設定二事件觀測器，分別觀測contextmenu與auxclick事件，其中contextmenu事件發生後施以event.preventDefault()術法防止小七鼠遭受偷竊，而auxclick事件發生後施以showWarning函式之術。

seven.addEventListener("contextmenu", (event) => {
  event.preventDefault();
});
seven.addEventListener("auxclick", showWarning);

若嘗試偷竊可愛鼠小七，則受到強力之譴責。

示例之術式

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

翻譯

鼠輩：滑鼠
點按處：按鍵
主要點按處：primary pointer button
右處：右鍵

相關連結

• dblclick - w3.org
• auxclick - w3.org
• contextmenu - w3.org