Question

这是我的简单代码：

<!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元素组成的线条，当你释放按钮时，它会停止。它实际上是有效的...有时候。它第一次完美，但是在让鼠标左键上升后，再按下后，只有一个元素被绘制，移动鼠标没有做任何事情。确切地说 - 有时它确实有时没有。如果你可以尝试这个代码和看看会发生什么。谢谢。

Answer 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://stackoverflow.com/a/891616/1355315

Answer 2

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

也许这是与时间相关的问题。我已将作业移至onmousemove功能之外的onmousedown，现在它正常运行

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

Javascript鼠标事件问题

2 个答案: