files/zh-cn/web/api/mouseevent/region/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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>