元素：auxclick 事件

auxclick 事件在 Element 上触发，当非主要指向设备按钮（任何鼠标按钮，除了主要按钮——通常是最左边的按钮）在同一个元素内按下并释放时。

auxclick 事件在 mousedown 和 mouseup 事件按顺序触发后触发。

语法

在诸如 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

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

onauxclick = (event) => {};

事件类型

一个 PointerEvent。继承自 MouseEvent.

注意： 在规范的早期版本中，此事件的事件类型是 MouseEvent，而这仍然是 Firefox 和 Safari 中传递的类型。

事件属性

此接口继承自 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

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;
}

注意：如果您使用的是三键鼠标，您会注意到当单击任何非左键鼠标按钮时（通常包括游戏鼠标上的任何“特殊”按钮）都会运行 onauxclick 处理程序。

规范

规范
UI 事件 # event-type-auxclick
HTML 标准 # handler-onauxclick

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。