update to latest Web/API/HTMLElement/click, zh-CN (#1871)

* Re-translated from the English version to replace outdated content

* Fix an omission

1 files changed, 46 insertions, 28 deletions

diff --git a/files/zh-cn/web/api/htmlelement/click/index.html b/files/zh-cn/web/api/htmlelement/click/index.html
index 3508c013d3..fe742c3eb2 100644
--- a/files/zh-cn/web/api/htmlelement/click/index.html
+++ b/files/zh-cn/web/api/htmlelement/click/index.html
@@ -1,44 +1,62 @@
 ---
-title: HTMLElement.click
+title: HTMLElement.click()
 slug: Web/API/HTMLElement/click
 tags:
-  - API
-  - HTML DOM
-  - HTMLElement
+- API
+- HTML DOM
+- HTMLElement
+- Method
+- Reference
+browser-compat: api.HTMLElement.click
 translation_of: Web/API/HTMLElement/click
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+<div>
+  <div>{{ APIRef("HTML DOM") }}</div>
+</div>
 
-<p><strong>click</strong> 方法可以用来模拟鼠标左键单击一个元素。</p>
+<p>The <code><strong>HTMLElement.click()</strong></code>方法可以用来模拟鼠标左键单击一个元素。</p>
 
-<p>当在支持click方法的元素上使用该方法时（比如{{ HTMLElement("input") }}元素），会触发该元素的 click 事件。该事件会一直向文档树的上层元素冒泡，也会触发它们各自的click事件。但是，冒泡而来的事件会让一个 {{HTMLElement("a")}} 元素像受到真实的鼠标点击一样执行页面的跳转。</p>
+<p>当在支持 <code>click()</code> 方法的元素上使用该方法（例如
+  {{HTMLElement("input")}}) ，将会产生该元素的一个点击事件。这个事件会冒泡上升到文档树（或事件链）中更高的元素，并触发它们的点击事件。</p>
 
-<h3 id="Syntax" name="Syntax">语法</h3>
+<h2 id="Syntax">语法</h2>
 
-<pre class="syntaxbox">element.click()
+<pre class="brush: js"><em>element</em>.click()</pre>
+
+<h2 id="Example">用例</h2>
+
+<p>当鼠标移动过复选框时模拟一个点击事件：</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('click event occurred')"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">// 当鼠标滑过（mouse-over）执行 myFunction
+function myFunction() {
+  document.getElementById("myCheck").click();
+}
 </pre>
 
-<h3 id="Specification" name="Specification">规范</h3>
+<h2 id="Specifications">规范</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
+<h2 id="Browser_compatibility">浏览器兼容性</h2>
 
+<p>{{Compat}}</p>
 
+<h2 id="See_also">参见</h2>
 
-<p>{{Compat("api.HTMLElement.click")}}</p>
+<ul>
+  <li>有关的事件处理
+    <ul>
+      <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
+      <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+      <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
+    </ul>
+  </li>
+</ul>