initial commit

1 files changed, 56 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/mouseevent/region/index.html b/files/zh-cn/web/api/mouseevent/region/index.html
new file mode 100644
index 0000000000..15bdf83f92
--- /dev/null
+++ b/files/zh-cn/web/api/mouseevent/region/index.html
@@ -0,0 +1,56 @@
+---
+title: MouseEvent.region
+slug: Web/API/MouseEvent/region
+tags:
+  - API
+  - Canvas
+  - DOM Events
+  - MouseEvent
+translation_of: Web/API/MouseEvent/region
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>The <strong><code>MouseEvent.region</code></strong> read-only property returns the id of the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.addHitRegion">canvas hit region</a> affected by the event. If no hit region is affected, <code>null</code> is returned.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>hitRegion</em> = <em>instanceOfMouseEvent</em>.region
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>A {{domxref("DOMString")}} representing the id of the hit region.</p>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+
+&lt;script&gt;
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: "circle"});
+
+canvas.addEventListener("mousemove", function(event){
+  if(event.region) {
+    console.log("hit region: " + event.region);
+  }
+});
+&lt;/script&gt;
+</pre>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.MouseEvent.region")}}</p>
+
+<h2 id="更多参考">更多参考</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.addHitRegion()")}}</li>
+</ul>