1
mousemove、mousedown、mouseup、およびdblclickにイベントリスナーが設定されています。 mousedown/up/moveはすべてうまく動作しますが、私がdblclickを実行すると起動し、ドラッグをしたらmousedownが得られますが、いくつかのマウスがありますが、それを通る円が私のために現れますカーソルとそれは私がもうドラッグすることはできません。マウスアップが失われているようですが、クリックして再びドラッグすると、すべてのイベントが予想どおりに取得されます。これはChromeでのみ発生し、IEとFirefoxの両方が正常に動作します。dblclickのイベントリスナーが原因でmousemoveのイベントが機能しなくなり、円が1行で表示される
ここでは、フルサイトと同じ問題が発生している例を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function (message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasLoaded();
}
function canvasLoaded() {
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
context.fillStyle = '#aaaaaa';
context.fillRect(0, 0, 502, 502);
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (theCanvas.attachEvent)
{
theCanvas.addEventListener("mousemove", eventMouseMove);
theCanvas.addEventListener("mousedown", eventMouseDown);
theCanvas.addEventListener("mouseup", eventMouseUp);
theCanvas.addEventListener("dblclick", eventDoubleClick);
}
else if (theCanvas.addEventListener)
{
theCanvas.addEventListener("mousemove", eventMouseMove, false);
theCanvas.addEventListener("mousedown", eventMouseDown, false);
theCanvas.addEventListener("mouseup", eventMouseUp, false);
theCanvas.addEventListener("dblclick", eventDoubleClick, false);
}
}
function eventDoubleClick(e) {
Debugger.log("double click: " + e);
}
function eventMouseMove(e) {
Debugger.log("mouseMove");
}
function eventMouseDown(e) {
Debugger.log("mouse Down");
}
function eventMouseUp(e) {
Debugger.log("mouseUp");
}
</script>
<link rel="shortcut icon" href="images/favicon.ico"/>
</head>
<body>
<div id="leftAll" style="position: absolute; top: 50px; left: 50px;">
<img src="images\GTWeb-gray-50x90.png" alt="GTWeb"/>
<div id="version">
</div>
<div id="leftDiv">
<canvas id="canvasOne" width="502" height="502">Your browser does not support HTML5 Canvas.</canvas>
</div>
</div>
</body>
私が私の完全なサイトでハイライトを見ることができないのに、ダブルクリックイベントは、キャンバス上のイメージを強調していることが表示されます。イメージを取り出すと問題は解決します。とにかく私はダブルクリックをクリアすることができますかキャンバスの上のイメージを選択しないようにしますか？
間違いなくコードが必要です。 –
@NateB okコードを追加しました。ご協力いただきありがとうございます – Millec8