From fb41f83719e57a961a3c17962b0fa3d2b5e41119 Mon Sep 17 00:00:00 2001 From: allo Date: Wed, 8 Dec 2021 08:10:55 +0800 Subject: mv to .md for web\api\globaleventhandlers\onclick --- .../web/api/globaleventhandlers/onclick/index.html | 95 ---------------------- .../web/api/globaleventhandlers/onclick/index.md | 95 ++++++++++++++++++++++ 2 files changed, 95 insertions(+), 95 deletions(-) delete mode 100644 files/zh-cn/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onclick/index.md (limited to 'files/zh-cn/web/api/globaleventhandlers') diff --git a/files/zh-cn/web/api/globaleventhandlers/onclick/index.html b/files/zh-cn/web/api/globaleventhandlers/onclick/index.html deleted file mode 100644 index 6a2cc3e73b..0000000000 --- a/files/zh-cn/web/api/globaleventhandlers/onclick/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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", "event handler")}}）。

- -

当用户点击一个元素时，会触发 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")}}

-
- -

参见

- - diff --git a/files/zh-cn/web/api/globaleventhandlers/onclick/index.md b/files/zh-cn/web/api/globaleventhandlers/onclick/index.md new file mode 100644 index 0000000000..6a2cc3e73b --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onclick/index.md @@ -0,0 +1,95 @@ +--- +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", "event handler")}}）。

+ +

当用户点击一个元素时，会触发 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")}}

+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf