I have created a sketchpad, let's call it, which you can hover over and it will change color wherever your mouse is if your left button is pressed, giving the effect of drawing on the sketchpad. When you release the button it should of course stop 'drawing'.
http://jsfiddle.net/burkely/0nqfzts0/3/
Sometimes however, my mouseup event is not firing though my mouse left button is released. During this issue i can see my cursor is of type 'not-allowed (i.e, circle with cross line it in). It's as if the browser thinks I'm trying to drag something rather than click and hover. But this only happens when I click and move my mouse rather quickly!
I of course looked for solutions on stackoverflow and eventually found two that solve my problem:
If I add
event.preventDefault(); or return false;
See them in action here:
http://jsfiddle.net/burkely/0nqfzts0/8/
http://jsfiddle.net/burkely/0nqfzts0/10/
to my mousedown() function I no longer have the issue. I don't know why these solutions are working exactly though, even after having done pretty extensive research. (I've been stuck on this for several hours)
I also found an answer that said "The mouseup event is being detected correctly; it's just that the browser is not firing a mouseup event after you perform a drag. This is an intentional behavior by the browser."
I'm still unsure what is going on with the mousedown and mouseup events and why it tries to drag. I have a vague idea of what the preventDefault is doing, but again it's not fully clear.
Also, I've noticed a weird line comes up sometimes when drawing - as if a line of divs are selected somehow - and this is also solved with the two solutions above. I really have no idea why this is happening or being solved!
I would prefer to fully understand any code I use and not throw a fix in and move on without knowing why it's fixed. Could anyone shed some light on what is exactly happening?
