У меня есть прослушиватели событий, настроенные для mousemove, mousedown, mouseup и dblclick. Mousedown / up / move все отлично работают сами по себе, но когда я делаю dblclick, он срабатывает, а затем, если я пытаюсь сделать drag, тогда я получаю mousedown, затем несколько движений мыши, но затем появляется круг с линией, проходящей через него. курсор, и он не позволит мне тянуть больше. Кажется, мышь теряется, но если я снова нажму и перетащу, я получу все события, как ожидалось. Это происходит только в Chrome, IE и Firefox работают как положено.
Вот пример, который имеет ту же проблему, что и полный сайт.
<!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>
Похоже, что событие двойного щелчка выделяет изображение над холстом, хотя я не вижу выделения на моем полном сайте. Если я вытащу изображение, то проблема исправлена. В любом случае можно ли убрать двойной щелчок или сделать так, чтобы он не выделял изображение над холстом?