元素：auxclick 事件

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("auxclick", (event) => { })

onauxclick = (event) => { }

事件型別

一個 PointerEvent。繼承自 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 只讀

指示此指標是否表示此指標型別的主要指標。

阻止預設操作

對於絕大多數將滑鼠中鍵對映到在新標籤頁中開啟連結的瀏覽器，包括 Firefox，可以透過在 auxclick 事件處理程式中呼叫 preventDefault() 來取消此行為。

當監聽來自不支援輸入或導航的元素的 auxclick 事件時，你通常需要顯式阻止對映到滑鼠中鍵按下動作的其他預設操作。在 Windows 上，這通常是自動滾動；在 macOS 和 Linux 上，這通常是剪貼簿貼上。這可以透過阻止 mousedown 或 pointerdown 事件的預設行為來完成。

此外，你可能需要避免在右鍵單擊後開啟系統上下文選單。由於作業系統之間的時間差異，這也不是 auxclick 的可阻止的預設行為。相反，這可以透過阻止 contextmenu 事件的預設行為來完成。

示例

在此示例中，我們定義了兩個事件處理程式函式——onclick 和 onauxclick。前者改變按鈕背景顏色，而後者改變按鈕前景（文字）顏色。你也可以使用多按鈕滑鼠嘗試此演示，以檢視這兩個函式的實際效果（在 GitHub 上即時檢視；也可檢視原始碼）。

JavaScript

let button = document.querySelector("button");
let html = document.querySelector("html");

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
  return `rgb(${random(255)} ${random(255)} ${random(255)})`;
}

button.onclick = () => {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = (e) => {
  e.preventDefault();
  button.style.color = randomColor();
};

button.oncontextmenu = (e) => {
  e.preventDefault();
};

請注意，除了使用 onauxclick 捕獲 auxclick 事件之外，還捕獲了 contextmenu 事件，並在此事件上呼叫了 preventDefault()，以防止在應用顏色更改後彈出上下文選單。

HTML

<button><h1>Click me!</h1></button>

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

button {
  border: 0;
  background-color: white;
  font-size: 8vw;
  display: block;
  width: 100%;
  height: 100%;
}

h1 {
  letter-spacing: 0.5rem;
}

規範

瀏覽器相容性

另見

• 學習：事件簡介
• click
• contextmenu
• dblclick
• mousedown
• mouseup
• pointerdown
• pointerup