From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/element/mousemove_event/index.html | 159 +++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/ja/web/api/element/mousemove_event/index.html (limited to 'files/ja/web/api/element/mousemove_event') diff --git a/files/ja/web/api/element/mousemove_event/index.html b/files/ja/web/api/element/mousemove_event/index.html new file mode 100644 index 0000000000..aa0d3ccddc --- /dev/null +++ b/files/ja/web/api/element/mousemove_event/index.html @@ -0,0 +1,159 @@ +--- +title: 'Element: mousemove イベント' +slug: Web/API/Element/mousemove_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mousemove + - move + - pointer +translation_of: Web/API/Element/mousemove_event +--- +

{{APIRef}}

+ +

mousemove イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
+ +

例

+ +

次の例は、 {{domxref("Element/mousedown_event", "mousedown")}}, mousemove, and {{domxref("Element/mouseup_event", "mouseup")}} イベントを使って HTML5 の要素である canvas の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。

+ +

ページが読み込まれると、定数 myPics と context が、それぞれ canvas と描画に使用する 2d context の参照を格納するために生成されます。

+ +

mousedown イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 x と y に格納され、フラグ isDrawing の値が true になります。

+ +

ページ上でマウスを動かすと、 mousemove イベントが発行されます。 isDrawing が true である場合、 drawLine 関数を呼び出して x と y に格納された値から現在の位置まで線を引きます。

+ +

drawLine() 関数の返値は、座標を再調整して x と y に保存します。

+ +

mouseup イベントで線の最後の区間を描画し、 x と y をそれぞれを 0 に設定し、その後の描画を止めるために isDrawing を false に設定します。

+ +

HTML

+ +
<h1>マウスイベントを使ったお絵かき</h1>
+<canvas id="myPics" width="560" height="360"></canvas>
+
+ +

CSS

+ +
canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}
+ +

JavaScript

+ +
// isDrawing が真のとき、マウスを動かすと線を描く
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// event.offsetX, event.offsetY はキャンバスの縁からのオフセットの (x,y) です。
+
+// mousedown, mousemove, mouseup にイベントリスナーを追加
+myPics.addEventListener('mousedown', e => {
+  x = e.offsetX;
+  y = e.offsetY;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.offsetX, e.offsetY);
+    x = e.offsetX;
+    y = e.offsetY;
+  }
+});
+
+window.addEventListener('mouseup', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.offsetX, e.offsetY);
+    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();
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", 640, 450)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mousemove_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf