元素：点击事件

基线 广泛可用

此功能已得到很好的建立，并且在许多设备和浏览器版本中都能正常使用。它从 2015 年 7 月.

报告反馈

  • 当发生以下任何情况时，元素会接收click事件
  • 当指针位于元素内部时，点按设备按钮（如鼠标的主按钮）既被按下又被释放。
  • 在元素上执行触摸手势。

发生任何等同于点击的用户交互，例如，当元素获得焦点时按下空格键或Enter键。

注意：在实践中，浏览器不会为自定义控件（如带有tabindex="0"的<div>）触发click事件。要检查此行为背后的原因，请参阅此Chromium 问题。

click 事件在 mousedown 和 mouseup 事件按顺序触发后才会触发。

该事件是一个设备无关的事件，这意味着它可以通过触摸、键盘、鼠标以及辅助技术提供的任何其他机制激活。

语法

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

js
addEventListener("click", (event) => {});

onclick = (event) => {};

事件类型

一个 PointerEvent。继承自 MouseEvent。

Event UIEvent MouseEvent PointerEvent

注意: 在规范的早期版本中，此事件的事件类型是 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 只读

指示指针是否代表此指针类型的首要指针。

使用说明

传递到 click 事件处理程序的 PointerEvent 对象的 detail 属性设置为 target 被点击的次数。换句话说，对于双击，detail 将为 2，对于三击，detail 将为 3，等等。此计数器在没有任何点击发生的情况下，会在短时间间隔后重置；该间隔的具体时间可能因浏览器和平台而异。该间隔也可能受用户偏好的影响；例如，辅助功能选项可能会延长此间隔，以方便使用自适应界面进行多次点击。

示例

此示例显示 <button> 上的连续点击次数。

HTML

html
<button>Click</button>

JavaScript

js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `Click count: ${event.detail}`;
});

结果

尝试对按钮进行快速、重复的点击以增加点击计数。如果在点击之间暂停，计数将重置。

规范

规范
UI 事件
# event-type-click
HTML 标准
# handler-onclick

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅