dblclick的事件监听器导致鼠标移动的事件不起作用，并显示一个带有一条线的圆圈

Event listener for dblclick causes event for mousemove to not work and show a circle with a line through it

本文关键字：事件 一个 一条 显示 鼠标 监听器 移动 不起作用 dblclick      更新时间：2023-09-26

我为鼠标移动、鼠标下降、鼠标上升和dblclick设置了事件侦听器。鼠标上下移动本身都很好用，但当我点击鼠标时，它会触发，然后如果我尝试进行拖动，我得到一个鼠标向下，然后一些鼠标移动，然后出现一个圆圈，有一条线穿过光标，它不允许我再拖动了。鼠标似乎迷路了，但如果我再次点击和拖动，然后我得到所有的事件，如预期的。这只发生在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>

似乎双击事件突出显示了画布上方的图像，尽管我无法在整个网站中看到突出显示。如果我把图像拿出来，问题就解决了。我是否可以清除双击或者使它不选择画布上方的图像?

我发现了如何在双击后清除选择:

if (window.getSelection)
    window.getSelection().removeAllRanges();
else if (document.selection)
    document.selection.empty();

我有同样的问题;或者查看解决方案防止双击后选择文本如果你更喜欢CSS欺骗，而不是JS欺骗，那么这个CSS解决方案(对我来说)是可行的。感谢所有参与者!

相关文章：