Element: click 事件
Baseline 广泛可用 *
当发生以下任何情况时，元素会收到一个 click 事件：
- 当指针位于元素内部时，按下并释放指向设备按钮（例如鼠标主按钮）。
- 在元素上执行触摸手势。
- 任何等同于点击的用户交互，例如当元素处于聚焦状态时按下 Space 键或 Enter 键。请注意，这仅适用于具有默认键盘事件处理程序的元素，因此，不包括通过设置
tabindex属性使其可聚焦的其他元素。
如果在某个元素上按下按钮，然后指针在按钮释放之前移到该元素之外，则事件将在包含这两个元素的最具体的祖先元素上触发。
click 事件在 mousedown 和 mouseup 事件（按此顺序）触发之后触发。
该事件是一个与设备无关的事件——这意味着它可以通过触摸、键盘、鼠标以及辅助技术提供的任何其他机制来激活。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("click", (event) => { })
onclick = (event) => { }
事件类型
一个 PointerEvent。继承自 MouseEvent。
注意： 在规范的早期版本中，此事件的事件类型是 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只读-
指示此指针是否表示此指针类型的主要指针。
用法说明
传入 click 事件处理程序的 PointerEvent 对象的 detail 属性设置为 target 被点击的次数。换句话说，对于双击，detail 将为 2；对于三击，将为 3，依此类推。此计数器在短时间没有发生任何点击后重置；该间隔的具体时长可能因浏览器和平台而异。该间隔也可能受用户偏好影响；例如，辅助功能选项可能会延长此间隔，以使通过自适应界面执行多次点击更容易。
示例
此示例显示了 <button> 上的连续点击次数。
HTML
<button>Click</button>
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
button.textContent = `Click count: ${event.detail}`;
});
结果
尝试快速、重复地点击按钮以增加点击次数。如果您在两次点击之间休息，计数将重置。
规范
| 规范 |
|---|
| UI 事件 # event-type-click |
| HTML # handler-onclick |
浏览器兼容性
加载中…