Why does onMouseOver fire twice?

[Jean-Francois Larvoire]

Hi,

I wrote code to highlight cells in an HTML table when the mouse flies over
them.
The code works well, except for a strange problem:
When the mouse enters a cell, I get 3 events for the cell: MouseOver;
MouseOut; MouseOver.
Then when the mouse leaves the cell, I also get 3 events: MouseOut;
MouseOver; MouseOut. (And 3 more when it enters the neighbouring cell)
Of course, I expected a single MouseOver on entry, and a single MouseOut on
exit.

I suspect something related to style, as if I enter a cell moving the mouse
very very slowly, I get the 1st MouseOver on the first pixel. As long as I
stay there, nothing more occurs. Then when I move 1 more pixel inwards I get
the MouseOut event. Finally moving in a third pixel, I get the last
MouseOver event. Then I can move the mouse anywhere inside that 3-pixel
boundary with no further events.
I've set margin: 0; padding: 0; border-width:0 in the CSS, but this does not
resolve the problem.

Both IE6 and NS6 behave the same way, which seems to mean it's my code (or
my expectations) that's wrong.

The code is visible online at http://ashpgvl.free.fr/voiles/.
The only visible effect of the extra 2 events is a slight flash of the
message displayed in the status bar when passing that 2nd pixel boundary.

Any idea?

 

[George Hester]

Hi,

I wrote code to highlight cells in an HTML table when the mouse flies over
them.
The code works well, except for a strange problem:
When the mouse enters a cell, I get 3 events for the cell: MouseOver;
MouseOut; MouseOver.
Then when the mouse leaves the cell, I also get 3 events: MouseOut;
MouseOver; MouseOut. (And 3 more when it enters the neighbouring cell)
Of course, I expected a single MouseOver on entry, and a single MouseOut on
exit.

I suspect something related to style, as if I enter a cell moving the mouse
very very slowly, I get the 1st MouseOver on the first pixel. As long as I
stay there, nothing more occurs. Then when I move 1 more pixel inwards I get
the MouseOut event. Finally moving in a third pixel, I get the last
MouseOver event. Then I can move the mouse anywhere inside that 3-pixel
boundary with no further events.
I've set margin: 0; padding: 0; border-width:0 in the CSS, but this does not
resolve the problem.

Both IE6 and NS6 behave the same way, which seems to mean it's my code (or
my expectations) that's wrong.

The code is visible online at http://ashpgvl.free.fr/voiles/.
The only visible effect of the extra 2 events is a slight flash of the
message displayed in the status bar when passing that 2nd pixel boundary.

Any idea?

Well one thing that is strange and this is in IE 5.5 SP2. I do not experience the flicker you mention but I am getting
this. As I move the mouse over a cell the cursor changes to a hand. But if I move the mouse slowly to the left just
before the border of the cell the mouse changes to a cross signifying I can enter text or in fact the cell is no longer
clickable as a link. This behavior only occurs on the left side of the cell. I go from yellow to blue move the cursor
slowly to the left and just before the border the mouse icon changes from a hand to the cross. So it seems to me there is a variation in properties of the body of the cell.

 

[Rithish Saralaya]

Hi,

I wrote code to highlight cells in an HTML table when the mouse flies over
them.
The code works well, except for a strange problem:
When the mouse enters a cell, I get 3 events for the cell: MouseOver;
MouseOut; MouseOver.
Then when the mouse leaves the cell, I also get 3 events: MouseOut;
MouseOver; MouseOut. (And 3 more when it enters the neighbouring cell)
Of course, I expected a single MouseOver on entry, and a single MouseOut on
exit.

I suspect something related to style, as if I enter a cell moving the mouse
very very slowly, I get the 1st MouseOver on the first pixel. As long as I
stay there, nothing more occurs. Then when I move 1 more pixel inwards I get
the MouseOut event. Finally moving in a third pixel, I get the last
MouseOver event. Then I can move the mouse anywhere inside that 3-pixel
boundary with no further events.

I think your text is wrapped within another element, say an anchor.
True?? Something like, <TD> <A ...>text</A></TD>. and, if you are
calling the same functions on mouse actions on both <A> and <TD>, then
what you describe might occur. I believe you have to cancel the event
bubbling, although I am unsure if this is indeed the solution. Just a
suggestion.

The code is visible online at http://ashpgvl.free.fr/voiles/.

I apologize that I am unable to view this, and verigy if my comments
validate.

Regards,
Rithish.

 

[Geir Klemetsen]

Hi,

I wrote code to highlight cells in an HTML table when the mouse flies over
them.
The code works well, except for a strange problem:
When the mouse enters a cell, I get 3 events for the cell: MouseOver;
MouseOut; MouseOver.
Then when the mouse leaves the cell, I also get 3 events: MouseOut;
MouseOver; MouseOut. (And 3 more when it enters the neighbouring cell)
Of course, I expected a single MouseOver on entry, and a single MouseOut on
exit.

I suspect something related to style, as if I enter a cell moving the mouse
very very slowly, I get the 1st MouseOver on the first pixel. As long as I
stay there, nothing more occurs. Then when I move 1 more pixel inwards I get
the MouseOut event. Finally moving in a third pixel, I get the last
MouseOver event. Then I can move the mouse anywhere inside that 3-pixel
boundary with no further events.
I've set margin: 0; padding: 0; border-width:0 in the CSS, but this does not
resolve the problem.

Both IE6 and NS6 behave the same way, which seems to mean it's my code (or
my expectations) that's wrong.

The code is visible online at http://ashpgvl.free.fr/voiles/.
The only visible effect of the extra 2 events is a slight flash of the
message displayed in the status bar when passing that 2nd pixel boundary.

Any idea?

I had the same problem with onresize in IE50. I used the window.timer() in
the function that runs every time i resized the window. This is how I solved
the problem:


<body onresize="runner();">

<script language=javascript>

var isRunning = new Boolean(false);
status = "";

function runner() {
if (isRunning == false){
isRunning = true;
setTimeout("further();", 250);
}
}

function further() {
alert ("This message should only appear one time when you resize the
window");
isRunning = false;
}

</script>