fix: fix live sample and sync with english version

2 files changed, 86 insertions, 170 deletions

diff --git a/files/zh-cn/web/api/mouseevent/screenx/index.md b/files/zh-cn/web/api/mouseevent/screenx/index.md
index 05a83f9ba0..4f70603287 100644
--- a/files/zh-cn/web/api/mouseevent/screenx/index.md
+++ b/files/zh-cn/web/api/mouseevent/screenx/index.md
@@ -13,80 +13,72 @@ tags:
   - 鼠标事件
 translation_of: Web/API/MouseEvent/screenX
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p><span class="seoSummary"> <strong><code>screenX</code></strong> 是 {{domxref("MouseEvent")}} 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。</span></p>
+**`screenX`** 是 {{domxref("MouseEvent")}} 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。
 
-<h2 id="语法">语法</h2>
+> **备注：** 在多屏显示的环境下，水平对齐的屏幕将被视为单个设备，因此 `screenX` 值的范围将增加到屏幕的组合宽度。
 
-<pre class="syntaxbox notranslate">var <em>pixelNumber</em> = <em>instanceOfMouseEvent</em>.screenX
-</pre>
+## 语法
 
-<h3 id="返回值">返回值</h3>
+```js
+var x = instanceOfMouseEvent.screenX
+```
 
-<p>一个双精度浮点值。早期版本的规范将该值定义为整数值的像素数。有关详细信息，请参见浏览器兼容性部分。</p>
+### 返回值
 
-<h2 id="示例">示例</h2>
+一个双精度浮点数。早期版本的规范将该值定义为整数值的像素数。有关详细信息，请参见浏览器兼容性部分。
 
-<p>这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。</p>
+## 示例
 
-<h4 id="HTML">HTML</h4>
+这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。
 
-<pre class="notranslate">&lt;p&gt;Move your mouse to see its position.&lt;/p&gt;
-&lt;p id="screen-log"&gt;&lt;/p&gt;</pre>
+#### HTML
 
-<h4 id="JavaScript">JavaScript</h4>
+```html
+<p>Move your mouse to see its position.</p>
+<p id="screen-log"></p>
+```
 
-<pre class="notranslate">let screenLog = document.querySelector('#screen-log');
+#### JavaScript
+
+```js
+let screenLog = document.querySelector('#screen-log');
 document.addEventListener('mousemove', logKey);
 
 function logKey(e) {
   screenLog.innerText = `
     Screen X/Y: ${e.screenX}, ${e.screenY}
     Client X/Y: ${e.clientX}, ${e.clientY}`;
-}</pre>
-
-<h4 id="结果">结果</h4>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">状态</th>
-   <th scope="col">注释</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View','#dom-mouseevent-screenx', 'screenX')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Redefines {{domxref("MouseEvent")}} from long to double. </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>No change from {{SpecName('DOM2 Events')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{Compat("api.MouseEvent.screenX")}}</p>
-
-<h2 id="参见"><span>参见</span></h2>
-
-<div id="compat-mobile"></div>
-
-<ul>
- <li>{{ domxref("MouseEvent") }}</li>
- <li>{{ domxref("MouseEvent.screenY","screenY") }}</li>
- <li>{{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }}</li>
-</ul>
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("Example")}}
+
+### 路由事件
+
+当你在窗口、文档或其他较大的元素上捕获事件时，可以获取事件的坐标（例如：click）然后作出正确的处理，如下所示：
+
+```js
+function checkClickMap(e) {
+  if (e.screenX < 50) doRedButton();
+  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
+  if (e.screenX >= 100) doRedButton();
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ domxref("MouseEvent") }}
+- {{ domxref("MouseEvent.screenY","screenY") }}
+- {{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }}
diff --git a/files/zh-cn/web/api/mouseevent/screeny/index.md b/files/zh-cn/web/api/mouseevent/screeny/index.md
index c90e1708d2..0ef14fad21 100644
--- a/files/zh-cn/web/api/mouseevent/screeny/index.md
+++ b/files/zh-cn/web/api/mouseevent/screeny/index.md
@@ -9,128 +9,52 @@ tags:
   - 鼠标事件
 translation_of: Web/API/MouseEvent/screenY
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p> <strong><code>screenX</code></strong> 是 <a href="/zh-CN/docs/Web/API/MouseEvent"><code>MouseEvent</code></a> 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。</p>
+**`screenX`** 是 {{domxref("MouseEvent")}} 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。
 
-<h2 id="语法">语法</h2>
+## 返回值
 
-<pre class="syntaxbox notranslate">var <em>pixelNumber</em> = <em>instanceOfMouseEvent</em>.screenY
-</pre>
+一个双精度浮点数。早期版本的规范定义将其一个整数值的像素数。有关详细信息，请参见浏览器兼容性部分。
 
-<h3 id="返回值">返回值</h3>
+## 示例
 
-<p>一个<code>double</code>值。早期版本的规范定义将其一个整数值的像素数。有关详细信息，请参见浏览器兼容性部分。</p>
+这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。
 
-<h2 id="示例">示例</h2>
+### HTML
 
-<p>这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。</p>
+```html
+<p>Move your mouse to see its position.</p>
+<p id="screen-log"></p>
+```
 
-<h3 id="HTML">HTML</h3>
+### JavaScript
 
-<pre class="notranslate">&lt;p&gt;Move your mouse to see its position.&lt;/p&gt;
-&lt;p id="screen-log"&gt;&lt;/p&gt;</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="notranslate">let screenLog = document.querySelector('#screen-log');
+```js
+let screenLog = document.querySelector('#screen-log');
 document.addEventListener('mousemove', logKey);
 
 function logKey(e) {
   screenLog.innerText = `
     Screen X/Y: ${e.screenX}, ${e.screenY}
     Client X/Y: ${e.clientX}, ${e.clientY}`;
-}</pre>
-
-<h3 id="结果">结果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View','#dom-mouseevent-screeny', 'screenY')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Redefines {{domxref("MouseEvent")}} from long to double. </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-screenY','MouseEvent.screenY')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>No change from {{SpecName('DOM2 Events')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenY')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Chrome</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>6</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Android</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also" name="See_also">参见</h2>
-
-<ul>
- <li>{{ domxref("MouseEvent") }}</li>
- <li>{{ domxref("MouseEvent.screenX","screenX") }}</li>
- <li>{{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }}</li>
-</ul>
+}
+```
+
+### 结果
+
+{{EmbedLiveSample("Example")}}
+
+## 规范
+
+{{Specifications}}
+
+### 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("MouseEvent")}}
+- {{domxref("MouseEvent.screenX","screenX")}}
+- {{domxref("MouseEvent.clientX","clientX")}} / {{domxref("MouseEvent.clientY", "clientY")}}