--- title: GlobalEventHandlers.onclick slug: Web/API/GlobalEventHandlers/onclick tags: - API - Event Handler - GlobalEventHandlers - HTML DOM - Property - Reference - 事件处理器 - 全局事件处理器 translation_of: Web/API/GlobalEventHandlers/onclick ---
{{ ApiRef("HTML DOM") }}

全局事件处理器（{{domxref("GlobalEventHandlers")}}）之一的 onclick 属性，是处理当前元素的 {{event("click")}} 事件的事件处理器（{{event("Event_handlers")}}）。

当用户点击一个元素时，会触发 click 事件。在每次点击的整个过程中，click 事件的运行顺序在 {{event("mousedown")}} 和 {{event("mouseup")}} 事件之后。

注意：当你使用 click 事件去触发一个动作时，也要考虑向 {{event("keydown")}} 事件添加此动作，以便允许不使用鼠标或触摸屏的用户进行同样的操作。

语法

element.onclick = functionRef;

functionRef 是一个函数名称，或一个函数表达式。该函数接收 {{domxref("MouseEvent")}} 对象作为其唯一参数。在函数内，this 是触发当前事件的元素。

同一时刻，每个 onclick 接收器只能指向唯一一个对象。所以，你可能更倾向于使用{{domxref("EventTarget.addEventListener()")}} 的方法，这种方法更加灵活，同时也是 DOM 事件规范格式。

例子

这个例子会记录每次点击的坐标。

HTML

<p>请随意点击本例子。</p>
<p id="log"></p>

JavaScript

let log = document.getElementById('log');

document.onclick = inputChange;

function inputChange(e) {
  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
}

Result

{{EmbedLiveSample("Example")}}

也可以使用匿名函数：

p.onclick = function() { alert("moot!"); };

规范

规范 状态 备注
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}} {{Spec2('HTML WHATWG')}}

浏览器兼容性

{{Compat("api.GlobalEventHandlers.onclick")}}

参见