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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
title: mousemove
slug: Web/API/Element/mousemove_event
tags:
- API
- DOM
- Event
- Interface
- NeedsBrowserCompatibility
- NeedsMobileBrowserCompatibility
- NeedsSpecTable
- Reference
translation_of: Web/API/Element/mousemove_event
---
<div>{{APIRef}}</div>
<p><font face="Consolas, Liberation Mono, Courier, monospace">当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。</font></p>
<h2 id="基本信息">基本信息</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row">是否冒泡</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">是否可取消</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">接口</th>
<td>{{domxref("MouseEvent")}}</td>
</tr>
<tr>
<th scope="row">事件处理</th>
<td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td>
</tr>
</tbody>
</table>
<h2 id="例子"><span style="">例子</span></h2>
<p>下面的例子将使用 {{domxref("Element/mousedown_event", "mousedown")}}, <code>mousemove</code> 以及 {{domxref("Element/mouseup_event", "mouseup")}} 事件，实现一个允许用户在 HTML5 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a>绘图的功能。这个例子的功能很简单：线的粗细设置为1，颜色始终为黑色。</p>
<p>当页面加载完成，我们使用变量 <code>myPics</code> 和<code>context</code>分别保存ID为<code>myPics</code>的DOM元素和接下来需要加工的的2d元素。</p>
<p>当<code>mousedown</code>事件被触发时，绘图也开始了。首先，我们将鼠标的<code>x</code>坐标和<code>y</code>坐标分别赋值给变量<code>x</code>和<code>y</code>，然后设置<code>isDrawing</code>为<code>true</code>。</p>
<p>当鼠标在页面上移动时，<code>mousemove</code>事件被触发。当<code>isDrawing</code>为true时，事件处理程序将会调用<code>drawLine</code>函数，该函数从变量<code>x</code>和<code>y</code>所指的位置开始，到现在鼠标所在的位置，画一条线。</p>
<p>当<code>drawLine()</code>调用结束时，我们需要把坐标赋值到<code>x</code>和<code>y</code>中。</p>
<p><code>mouseup</code>事件绘制图形的最后一段，并把<code>x</code>和<code>y</code>设置为0.通过设置isDra</p>
<p><code>mouseup</code>事件绘制图形的最后一段，并把<code>x</code>和<code>y</code>设置为0.通过设置<code>isDrawing</code>为false，可以停止绘制。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById('myPics');
const context = myPics.getContext('2d');
// The x and y offset of the canvas from the edge of the page
const rect = myPics.getBoundingClientRect();
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener('mousedown', e => {
x = e.clientX - rect.left;
y = e.clientY - rect.top;
isDrawing = true;
});
myPics.addEventListener('mousemove', e => {
if (isDrawing === true) {
drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
x = e.clientX - rect.left;
y = e.clientY - rect.top;
}
});
window.addEventListener('mouseup', e => {
if (isDrawing === true) {
drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("Examples", 640, 450)}}</p>
<h2 id="参考">参考</h2>
<table>
<thead>
<tr>
<th scope="col">gui</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td>
<td>{{Spec2('UI Events')}}</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.Element.mousemove_event")}}</p>
<h2 id="See_also">See also</h2>
<div>
<ul>
<li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
<li>{{Event("mousedown")}}</li>
<li>{{Event("mouseup")}}</li>
<li>{{Event("click")}}</li>
<li>{{Event("dblclick")}}</li>
<li>{{Event("mouseover")}}</li>
<li>{{Event("mouseout")}}</li>
<li>{{Event("mouseenter")}}</li>
<li>{{Event("mouseleave")}}</li>
<li>{{Event("contextmenu")}}</li>
</ul>
</div>
|
