2

I have a HTML webpage that contains a 15x15 table and I also have a small square div that follows the mouse when you press and hold the left mouse button on the div.

I have assigned an onmouseover event to the 15x15 table so that when the mouse hovers over a cell, a variable called "gridPlacement" is set the value of the unique id of the table cell the mouse hovered over.

The onmouseover event seems to work fine and instantly as soon as you hover over a cell the variable "gridPlacement" is set to the cell's id.

But when the onmousedown and onmousemove events are triggered (when the mouse presses and holds the left mouse button on the div I mentioned earlier), sometimes when you hover over a cell the variable "gridPlacement" isn't set, and sometimes you have to move your mouse over the cell a few times for it to work.

It seems the onmousedown and onmousemove events seem to have an impact on the onhover event on my 15x15 table.

Does anybody know why this happens and how I can work around this problem?

I hope you understand me, I've tried to explain my problem as best as I can.

PROBLEM SOLVED!

Changing the offset of the element the user is dragging did the trick, thank you all for helping me! :)

AlexPriceAP
  • 1,987
  • 6
  • 26
  • 41
  • Can you post a link illustrating the problem? – dionyziz Feb 19 '11 at 19:57
  • I'm developing locally, sorry! – AlexPriceAP Feb 19 '11 at 20:01
  • @AlexPriceAP: You could reproduce your problem with http://jsfiddle.net/ – Felix Kling Feb 19 '11 at 20:26
  • So do you mean onmousedown + onmousemove + onhover affects the variable being set onhover? If so, that makes a lot of sense to me, since modern browsers tend to try and do a lot of 'dragging' of content (selected text, the page/tab/document) that you haven't scripted. –  Feb 19 '11 at 21:02
  • @D_N: No the variable itself isn't being affected, the onmouseover event for the table seems to be being affected and not working properly when the onmousemove event is running :(, well I think it's the onmousemove that's affecting it anyway, or maybe it's because the mouse isn't properly hovering over the table? But if that's the case how can I make it think the mouse is hovering over the table and not hovering over the div I'm dragging? – AlexPriceAP Feb 19 '11 at 23:45
  • @AlexPriceAP, at this point I think it'd be a great help to put the relevant code in your question so we can replicate it (you may get more responses by putting it on jsFiddle.net, too, as suggested above). –  Feb 20 '11 at 01:40

2 Answers2

2

The problem you asked about happens because when you have the button pressed the div is under your mouse, so you don't actually hover the cell (at least thats what I get from your description). A workaround would be to set the desired variable when you exit a certain cell (onmouseout) but this does not help you since I guess you want to know over witch cell you are over, so I guess you can get the mouse position and compare it to the position of the cells... unless you get a better answer because this is kind of... not so easy.

zozo
  • 8,230
  • 19
  • 79
  • 134
2

I think zozo is correct. I ran into a similar problem and the workaround I used is to change the offset of the element following the mouse so that it does not appear directly under the mouse (maybe a few pixels to the side/above/below or something).

Hope this helps.

zdyn
  • 2,155
  • 1
  • 15
  • 17