Javascript mouse event issue

Question

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.

I did a [fiddle](http://jsfiddle.net/L4KhJ/) and it seems to works fine — Shryme, Dec 24 '13 at 13:07
Try to draw line more times.I tried to fiddle it too and it got weird again. — John Smith, Dec 24 '13 at 13:08
What do you mean by weird? I created a tons of line and it seems ok. — Shryme, Dec 24 '13 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 '13 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 '13 at 13:17

score 2 · Accepted Answer · edited May 23 '17 at 11:50

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

edited May 23 '17 at 11:50

Community

1
1

answered Dec 24 '13 at 13:26

Abhitalks

27,721
5
58
81

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 '13 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 '13 at 13:35
@Shryme This seems to be a Chromium issue. I can confirm this behaviour with Chromium 25, but not with Firefox 25. – Olaf Dietsche Dec 24 '13 at 13:39
@abhitalks Thanks for the clarification ! Now i understand why it keeps drawing. – Shryme Dec 24 '13 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 '13 at 13:48

score 1 · Answer 2 · answered Dec 24 '13 at 13:31

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

Javascript mouse event issue

2 Answers2