关于JavaScript鼠标事件异常，我遇到了麻烦

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. : )

我正在设计一个类似RPG的小型界面,用户可以*地创建他们使用的物品和武器。请放心,这个特定的系统是深思熟虑的,并不是我担心的原因。 :)

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.

不错,嗯?它除了一个小问题外,几乎没有任何缺陷,除了IE(多年来没有编码)。事实上,它实际上是如此轻微,以至于我很确定几乎所有玩家都会使用界面而不会给予任何关注。然而,我对自己的设计充满了兴趣,并且在这个问题上辛勤工作了几个小时,唉,把我带到了这里。

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

那么,Stack Overflow JavaScript大师,对这个问题有点帮助:

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

全局变量md(鼠标按下)在开始时设置为0

document.onmousedown sets md to 1; conversely, onmouseup puts it back at 0

document.onmousedown将md设置为1;相反,onmouseup将其恢复为0

user's currently selected color is stored as an index in cur_color

用户当前选择的颜色存储为cur_color中的索引

palette of user's colors stored in palette array

用户颜色的调色板存储在调色板阵列中

palette[cur_color] references the user's currently selected color

palette [cur_color]引用用户当前选择的颜色

upon moving over a tile, if the mouse is being held down, toggle() function initiates

在移动图块时,如果按住鼠标,则启动toggle()函数

toggle() compares the backgroundColor of the tile in question with the user's cur_color

toggle()将有问题的tile的backgroundColor与用户的cur_color进行比较

if they are different, cur_color overwrites, effectively "painting" that portion of the canvas

如果它们不同,cur_color会覆盖,有效地“绘制”画布的那一部分

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.

总体而言,这是一个非常基本的方法,但整个鼠标按下 - 没有注册 - 直到一平方米晚的事情正在扼杀我。再一次,对于解决这个问题的帮助绝对值得赞赏。

1 个解决方案

#1

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

这是因为你最初在鼠标移动时不会调用tile_over。通过上面的步骤阅读,您可以看到。

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

这是一个修复,将其添加到onmousedown函数:

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.

你需要删除鼠标在没有触发鼠标悬停时发生的切换,我没有打扰它,因为它应该是显而易见的。

#1