Q&A
JSFiddleでテストしてみましたが、問題が再現しません（Windows上のChromeでテストしました）。
https://jsfiddle.net/8rbgheu6/
ペイントっぽいコードを作ろうしたのですが
左クリックが押された地点を始点にして、そこからドラッグして線を引く仕様なのに、何故か右クリックが押された地点も始点になってしまいます
「左クリックのときのみ」としっかり指定したはずなのですが…
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5</head> 6<body> 7 <canvas></canvas> 8 <script src="js/main.js"></script> 9</body> 10</html>
Javascript
1const canvas = document.querySelector('canvas'); 2const ctx = canvas.getContext("2d"); 3 4ctx.rect(0, 0, canvas.width, canvas.height); 5ctx.fillStyle = "#000"; 6ctx.fill(); 7 8ctx.lineWidth = 5; 9ctx.strokeStyle = "#fff"; 10 11let mouse = {x: 0, y: 0}; 12 13canvas.addEventListener("mousemove", function(e) { 14 mouse.x = e.pageX - this.offsetLeft; 15 mouse.y = e.pageY - this.offsetTop; 16}, false); 17 18canvas.addEventListener("mousedown", function(e) { 19 if (e.button === 0) {//左クリックのときのみに指定 20 ctx.beginPath(); 21 ctx.moveTo(mouse.x, mouse.y); 22 23 canvas.addEventListener("mousemove", onPaint, false); 24 } 25}, false); 26 27canvas.addEventListener("mouseup", function() { 28 canvas.removeEventListener("mousemove", onPaint, false); 29}) 30 31const onPaint = function() { 32 ctx.lineTo(mouse.x, mouse.y); 33 ctx.stroke(); 34}
どうか原因を教えていただきたいです
[追記]
不具合の具体的な画像を載せさせていただきます
動作確認しているブラウザはなんですか？
macOSのChrome（93.0.4577.82）やSafari（14.1.2）ではきちんと左クリック・ドラッグで描画でき、右クリックでコンテキストメニューがでます。
`<body oncontextmenu="return false;">` でコンテキストメニューを無効化して `if (e.button === 2)` のように右クリック・ドラッグに切り替えると右だけで描画できますし（もちろん左クリック・ドラッグは無視されて描画されないようになっている）。特に問題ないように見えます。
返信が遅れてしまい申し訳ありません
ブラウザはwindows上のChromeです
説明が余りにも言葉足らずだったので、不具合の具体的なイメージ画像を質問に追記しておきました
なるほど！再現しました！（解決方法はまだわからない）
シークレットウィンドウでも再現できるのでマウスジェスチャ系の拡張機能の仕業でもなし。
とりあえず `<canvas oncontextmenu="return false;">` でキャンバス上でのコンテキストメニューを無効化するとマシになると思うのですが、コンテキストメニュー必須ですか？
どうしてもコンテキストメニューを使わざるを得ないです…お手数おかけしてしまってすみません
回答1件
0
ベストアンサー
コンテキストメニュー必須となると、
js
1canvas.addEventListener("mousemove", function(e) { 2 if (e.button != 0) { 3 return 4 } 5 mouse.x = e.pageX - this.offsetLeft; 6 mouse.y = e.pageY - this.offsetTop; 7}, false);
こんな感じで、mousemove でもボタン判定を入れるしかないですかねえ。二度手間な感じがしますが…………。
投稿2021/09/18 13:59
退会済みユーザー
総合スコア0
回答ありがとうございます
ただ同じようにやってみたのですが、不具合を解消できませんでした…自分が何かやり方を間違えてるんでしょうか
↓以下コードです
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext("2d");
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#000";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "#fff";
let mouse = {x: 0, y: 0};
canvas.addEventListener("mousemove", function(e) {
if (e.button != 0) {
return;
}
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
canvas.addEventListener("mousedown", function(e) {
if (e.button === 0) {//左クリックのときのみに指定
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener("mousemove", onPaint, false);
}
}, false);
canvas.addEventListener("mouseup", function() {
canvas.removeEventListener("mousemove", onPaint, false);
})
const onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
うちでは古いコードの方でも再現しなくなってしまいました。謎です。お役に立てず申し訳ない。
とんでもないです！お力添えいただけて凄く嬉しかったです
親切に対応して下さってありがとうございました
あなたの回答
tips
プレビュー
