元素：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