質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2955閲覧

【JavaScript】マウス操作イベントの練習プログラム

himejiy3

総合スコア77

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/10/10 15:32

16個x16個の白枠ブロック上で、マウスドラッグしながらなぞると黒いブロックが置かれる・・
という単純なプログラムを組みたかっただけなのですが、つまづいてしまいました。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>マウスイベントの練習</title> 6</head> 7<body> 8<div id="canvas"> 9</div> 10<script src="main.js"></script> 11</body> 12</html> 13

javascript

1document.addEventListener("DOMContentLoaded", () => { 2 "use strict"; 3 4 const canvas = document.getElementById("canvas"); 5 6 const BLOCK_WIDTH = 10; // png画像は縦横10ピクセル 7 const BLOCK_HEIGHT = 10; 8 const BOX_WIDTH = 16; // 並べる個数 9 const BOX_HEIGHT = 16; 10 const BLOCKpng = "block.png"; 11 const BLACKpng = "black.png"; 12 13 let mousBtnFlag = false; 14 15 let x, y; 16 let n = 1; // 左上がsquare1 17 const blockFlg = document.createDocumentFragment(); 18 for (y = 1; y <= BOX_HEIGHT; y++) { 19 for (x = 1; x <= BOX_WIDTH; x++) { 20 const img = document.createElement("img"); 21 img.id = `square${n}`; 22 img.src = BLOCKpng; 23 img.style.position = "absolute"; 24 img.style.left = `${x * BLOCK_WIDTH}px`; 25 img.style.top = `${y * BLOCK_HEIGHT}px`; 26 blockFlg.appendChild(img); 27 n++; 28 } 29 } 30 canvas.appendChild(blockFlg); 31 32 // 関数-------------------- 33 function mousDown() { 34 mousBtnFlag = true; 35 } 36 function mousUp() { 37 mousBtnFlag = false; 38 } 39 40 function mousMove(event) { 41 if (mousBtnFlag) { 42 event.src = BLACKpng; 43 } 44 } 45 46 // イベント処理---------------- 47 let i; 48 for (i = 1; i < n; i++) { 49 const obj = document.getElementById(`square${i}`); 50 obj.addEventListener("mousemove", () => { 51 mousMove(obj); 52 }); 53 obj.addEventListener("mouseup", () => { 54 mousUp(); 55 }); 56 obj.addEventListener("mousedown", () => { 57 mousDown(); 58 }); 59 } 60 61}); 62

マウス左ボタンを押し続けている間は
mousBtnFlag が true として、
mousemove と フラグtrueが両方成り立つ時に黒ブロックを置いていく・・

と書いたつもりですが、思惑通りには動いてくれませんでした。

いろいろイジって、思惑に最も近付いたコードが上記です。
しかしこれ以上はギブアップ気味です・・。ご教授よろしくお願いいたします。

Chromeで動いてくれればOKです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

うまく動かないというのはおそらく画像がドラッグ状態になることかと思います。

JavaScript

1obj.addEventListener("mousedown", (e) => { 2 mousDown(); 3 e.preventDefault(); // ドラッグにならないようここでキャンセル 4});

jsFiddleであなたのコードをもとに動作サンプルを作りました。
https://jsfiddle.net/ofd3gxmn/

なお、このコードだとcanvasの外でマウスを離すとmousBtnFlagがtrueのままになってしまうので、その対処は別でやる必要があります。

投稿2017/10/11 00:25

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

himejiy3

2017/10/11 01:01

おー、動きました!これです!こう動いてほしかったんです! イベントの伝播に原因があったんですね…。この解決法は自分1人では辿り着かなかったと思います。 ありがとうございました。大変勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問