Javascript鼠标事件问题答案

【问题标题】：Javascript mouse event issueJavascript鼠标事件问题
【发布时间】：2013-12-24 13:05:09
【问题描述】：

这是我的简单代码：

<!DOCTYPE html>
<html>

<head></head>

<body>
    <style>
    </style>
    <script>
var exit = 0;
document.onmousedown = function (e) {
    exit = 0;
    document.onmousemove = function (e) {
        if (exit == 1) {
            return;
        } else {
            var x = e.pageX;
            var y = e.pageY;
            var e = document.createElement("div");
            e.style.width = 10 + "px";
            e.style.height = 10 + "px";
            e.style.background = "red";
            e.style.top = y + "px";
            e.style.left = x + "px";
            e.style.position = "absolute";
            document.body.appendChild(e);
        }
    };
};
document.onmouseup = function (e) {
    exit = 1;
};
    </script>
</body>

</html>

就像画家。你按住鼠标左键，当你移动鼠标时，它应该画出由 div 元素组成的线，当你释放按钮时，它会停止。它实际上可以工作......有时。第一次它工作完美，但是在让鼠标左键向上并再次按下之后，只绘制了一个元素并且移动鼠标不会做任何事情。确切地说 - 有时会，有时不会。最好是如果你可以尝试这段代码和看看会发生什么。谢谢。

【问题讨论】：

我做了一个fiddle，它似乎工作正常
尝试多画几次线。我也试着拨弄它，它又变得奇怪了。
怪异是什么意思？我创建了很多行，看起来还可以。
当你按下 LMB 时，它只绘制一个 div。然后释放该按钮后，div 被鼠标移动绘制 - 甚至没有再次按下 LMB。也许我的鼠标有问题吧 :)
我成功重现了你的错误，但我真的不知道为什么会这样。在我看来，当你绘制时，它会选择一个元素，下次绘制时，它会尝试移动它但它不能移动，所以它只绘制 1 个 div，然后在 mousemove 上绘制其余部分，即使鼠标不在t实际按下

标签： javascript html

【解决方案1】：

这似乎是因为它与拖动与选择冲突。这两个事件都涉及 mousedown 和随后的 mousemove。

您需要防止默认事件，然后运行您的代码。

更新小提琴：http://jsfiddle.net/L4KhJ/2/

防止两个事件的默认值，像这样：

document.onmousedown = function (e) {
    stopDefault(e); // *** prevent default here   
    exit = 0;
    document.onmousemove = function (e) {
        stopDefault(e); // *** prevent default here   
        if (exit == 1) { ...

stopDefault 在哪里：

function stopDefault(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    }
    else {
        window.event.returnValue = false;
    }
    return false;
}

上述函数的代码取自此线程：https://*.com/a/891616/1355315

【讨论】：

当你按下并移出范围时，松开鼠标向上然后返回，它仍然在不按下鼠标的情况下绘制
@Shryme：是的，你是对的。这是因为 mouseup 从未在文档上注册，因为它已超出范围。因此，对于文档，它仍然被按下，因此继续绘制。
@Shryme 这似乎是 Chromium 问题。我可以用 Chromium 25 确认这种行为，但不能用 Firefox 25 确认。
@abhitalks 感谢您的澄清！现在我明白为什么它一直在画了。
@OlafDietsche：您的观察是正确的。与 Firefox 相比，Chrome 的问题更大。在我的最后，Firefox 对这个问题的容忍度要高得多。也许是 webkit/mozilla 的实现方式。

【解决方案2】：

当您添加一些日志输出时，您会看到有时在 mouseup 事件之后，您很快就会收到 mousedown。

也许这是一个与时间相关的问题。我将作业移到onmousedown 函数之外的onmousemove，现在它可以正常工作了

var exit = 1;
document.onmousemove = function (e) {
    if (exit == 1)
        return;

    var x = e.pageX;
    var y = e.pageY;
    var el = document.createElement("div");
    el.style.width = 10 + "px";
    el.style.height = 10 + "px";
    el.style.background = "red";
    el.style.top = y + "px";
    el.style.left = x + "px";
    el.style.position = "absolute";
    document.body.appendChild(el);
};
document.onmousedown = function (e) {
    exit = 0;
};
document.onmouseup = function (e) {
    exit = 1;
};

见JSFiddle

【讨论】：