Regarding a JavaScript mouse event anomaly I'm having trouble with...

Question

I'm in the process of designing a small RPG-like interface where the user will be given the freedom to create the items and weapons they use. Rest assured, that particular system is thought deeply through and is not the cause of my concern. : )

No, it is something related to the mechanism I have set up for the actual drawing of the user's items. I could try to put the design in words, but it would probably be most beneficial if I just took you there, so click here before continuing.

Not bad, eh? It works practically without flaw in everything but IE (haven't coded for it in years), except for one minor issue; it is, in fact, so minor, that I'm quite certain almost all players would use the interface without ever paying it any attention. I, however, am something of a nitpicker with my own designs, and toiling over this one for hours has, alas, led me here.

So, Stack Overflow JavaScript gurus, a bit of help regarding this issue:

At the moment, there are two ways by which you can inject color into the canvas; you can just click squares individually, or you can drag the mouse and fill in tiles as you go along. Well, give that second option a go. Now, did you notice that, while the dragging most definitely occured, your drag didn't actually initiate until you'd moved out of the square you began in.

Sure, no big deal, just go back and single-click the spot that got missed. And that is definitely something that I wouldn't mind settling with; at this point, though, it's just a matter of understanding why it is the code isn't working exactly as it should. Any help would be greatly appreciated.

Also, a run-down of the algorithm if you aren't able to decipher my code:

• global variable md (mouse down) set to 0 at start
• document.onmousedown sets md to 1; conversely, onmouseup puts it back at 0
• user's currently selected color is stored as an index in cur_color
• palette of user's colors stored in palette array
• palette[cur_color] references the user's currently selected color
• upon moving over a tile, if the mouse is being held down, toggle() function initiates
• toggle() compares the backgroundColor of the tile in question with the user's cur_color
• if they are different, cur_color overwrites, effectively "painting" that portion of the canvas
• this continues until the user has let go of their mouse button

Overall a pretty basic method, but that whole mouse-being-pressed-not-registering-until-one-square-late thing is killing me. Again, assistance with getting to the bottom of this matter would most definitely be appreciated.

Answer 1

It's because you don't call tile_over when mousing down initially. Reading through the steps above you can see that.

Here's a fix, add this to the onmousedown function:

var target = e.target || e.srcElement;
if (target.tagName == 'DIV' && target.className == 'tile') {
    tile_over(target);
}

Obviously having a framework to handle getting the targets of mouse events and so forth would make this easier.

You'll need to remove the toggle that occurs when you mouseup without having triggered a mouseover, I didn't bother tracking that down as it should be obvious.