From 94de0513dcf35c6f70bc81010fa71d0aa6fd182c Mon Sep 17 00:00:00 2001 From: allo Date: Wed, 22 Dec 2021 08:20:12 +0800 Subject: convert to markdown and sync with english version --- .../web/api/globaleventhandlers/onclick/index.md | 116 +++++++++++---------- 1 file changed, 62 insertions(+), 54 deletions(-) (limited to 'files/zh-cn/web/api') diff --git a/files/zh-cn/web/api/globaleventhandlers/onclick/index.md b/files/zh-cn/web/api/globaleventhandlers/onclick/index.md index 6a2cc3e73b..ae1dbb4a9c 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onclick/index.md +++ b/files/zh-cn/web/api/globaleventhandlers/onclick/index.md @@ -12,84 +12,92 @@ tags: - 全局事件处理器 translation_of: Web/API/GlobalEventHandlers/onclick --- -
{{ ApiRef("HTML DOM") }}
+{{ ApiRef("HTML DOM") }} -

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

+全局事件处理器（{{domxref("GlobalEventHandlers")}}）的 **`onclick`** 属性，是处理当前元素的 {{domxref("Element/click_event", "click")}} 事件的事件处理器（[event handler](/en-US/docs/Web/Events/Event_handlers)）。 -

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

+当用户点击一个元素时，会触发 `click` 事件。在每次点击的整个过程中，`click` 事件的运行顺序在 {{domxref("Element/mousedown_event", "mousedown")}} 和 {{domxref("Element/mouseup_event", "mouseup")}} 事件之后。 -
注意：当你使用 click 事件去触发一个动作时，也要考虑向 {{event("keydown")}} 事件添加此动作，以便允许不使用鼠标或触摸屏的用户进行同样的操作。
+> **备注：** 当你使用 `click` 事件去触发一个动作时，也要考虑向 {{domxref("Element/keydown_event", "keydown")}} 事件添加此动作，以便允许不使用鼠标或触摸屏的用户进行同样的操作。 -

语法

+## 语法 -
element.onclick = functionRef;
-
+```js +target.onclick = functionRef; +``` -

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

+### 值 -

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

+`functionRef` 是一个函数名称，或一个 [函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function)。该函数接收 {{domxref("MouseEvent")}} 对象作为其唯一参数。在函数内，{{jsxref("Operators/this", "this")}} 是触发当前事件的元素（同时匹配 `event.currentTarget`）。 -

例子

+同一时刻，每个 `onclick` 接收器只能指向唯一一个对象。所以，你可能更倾向于使用 {{domxref("EventTarget.addEventListener()")}} 的方法，这种方法更加灵活。 -

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

+## 示例 -

HTML

+### 监听 click 事件 -
<p>请随意点击本例子。</p>
-<p id="log"></p>
+这个示例会在 click 事件发生时改变元素颜色。 -

JavaScript

+#### HTML -
let log = document.getElementById('log');
+```html
+
请点击这里

+```
 
-document.onclick = inputChange;
+#### Javascript
 
-function inputChange(e) {
-  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
-}
+```js +document.getElementById('demo').onclick = function changeContent() { + + document.getElementById('demo').textContent = "Help me"; + document.getElementById('demo').style = "Color: red"; + +} +``` + +#### 结果 + +{{EmbedLiveSample("Detecting_clicks")}} + +### 获取点击的坐标 -

Result

+这个示例会记录每次点击的坐标。 -

{{EmbedLiveSample("Example")}}

+#### HTML -

也可以使用匿名函数：

+```html +

请随意点击本示例。

+

+``` + +#### JavaScript + +```js +let log = document.getElementById('log'); + +document.onclick = inputChange; + +function inputChange(e) { + log.textContent = `Position: (${e.clientX}, ${e.clientY})`; +} +``` -
p.onclick = function() { alert("moot!"); };
-
+#### 结果 -

规范

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

浏览器兼容性

+{{Specifications}} -
+## 浏览器兼容性 +{{Compat}} -

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

-
+## 参见 -

参见

+- {{domxref("Element/click_event", "click")}} 事件 +- 与 `onclick` 有关的事件处理器 - + - {{domxref("GlobalEventHandlers.onauxclick")}} + - {{domxref("GlobalEventHandlers.ondblclick")}} -- cgit v1.2.3-54-g00ecf