0

Here's my simple code:

<!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>

It's like painter.You hold left mouse button down and when you move mouse, it should draw line made of div elements and when you release button, it stops.It actually works...sometimes.First time it works perfect, but after letting left mouse button go up, and after additional press, only one element is drawn and moving mouse does not do anything.To be exact- sometimes it does and sometimes doesn't.Best would be if you could try this code and see what happens.Thanks.

5
  • 1
    I did a fiddle and it seems to works fine
    – Shryme
    Dec 24, 2013 at 13:07
  • Try to draw line more times.I tried to fiddle it too and it got weird again.
    – John Smith
    Dec 24, 2013 at 13:08
  • What do you mean by weird? I created a tons of line and it seems ok.
    – Shryme
    Dec 24, 2013 at 13:10
  • When you press LMB down, it draws only one div.Then after releasing that button, divs are being drawn on mouse move- without even pushing LMB again.Maybe there's someting wrong with my mouse huh :)
    – John Smith
    Dec 24, 2013 at 13:12
  • I successfully reproduce your error, but I really don't know why it's happening. It seems to me that when you draw, it select an element and the next time you draw, it tries to move it but it can't move so it draw only 1 div, then draw the rest on mousemove even if the mouse isn't actually pressed
    – Shryme
    Dec 24, 2013 at 13:17

2 Answers 2

2

It seems to be because it conflicts dragging with selection. Both events involve mousedown and subsequent mousemove.

You will need to prevent default of event and then run your code.

Updated fiddle: http://jsfiddle.net/L4KhJ/2/

Prevent the default on both events, like this:

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

Where stopDefault is:

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

Code for above function taken from this thread here: https://stackoverflow.com/a/891616/1355315

5
  • When you press down and move out of the scope, release and mouse up then return, it still draw without pressing the mouse down
    – Shryme
    Dec 24, 2013 at 13:31
  • @Shryme: yes, you are right. it is because the mouseup is never registered on document because it has gone out-of-scope. so, for the document it is still pressed and hence continues to draw.
    – Abhitalks
    Dec 24, 2013 at 13:35
  • @Shryme This seems to be a Chromium issue. I can confirm this behaviour with Chromium 25, but not with Firefox 25. Dec 24, 2013 at 13:39
  • @abhitalks Thanks for the clarification ! Now i understand why it keeps drawing.
    – Shryme
    Dec 24, 2013 at 13:45
  • @OlafDietsche: your observation is correct. it is more of an issue with chrome than with firefox. at my end too, firefox is far more tolerant of this issue. perhaps the way webkit/mozilla have been implemented.
    – Abhitalks
    Dec 24, 2013 at 13:48
1

When you add some log output, you see that sometimes after a mouseup event, you get a mousedown shortly after.

Maybe this is a timing related problem. I moved the assignment to onmousemove outside the onmousedown function and now it works properly

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;
};

See JSFiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.