Open Bug 107487 Opened 23 years ago Updated 2 years ago

extraneous onMouseOver events

Categories

(Core :: DOM: UI Events & Focus Handling, defect)

Product:
Core
Component:
DOM: UI Events & Focus Handling
Platform:
x86
Windows NT
Type:
defect

Tracking

()

People

(Reporter: clwardle, Unassigned)

Details

Attachments

(1 file)

HTML document showing the problem
3.58 KB, text/html
Details 
From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 4.0)
BuildID:    2001101117  (0.9.5)

I am trying to create a series of cascading menus using a combination of 
Javascript and dynamic style properties.
The sub-menus should only appear as the mouse moves over a higher-level cell, 
and then disappear as the mouse moves on.
The result works fine in Internet Explorer but fails in Mozilla, probably due 
to onMouseOver and onMouseOut event handling.  It may also be caused by the use 
of absolute positioning and dynamic flipping between "display:none" 
and "display:block". I believe my example uses standard style properties and 
Javascript events.
The failure causes sub-menus to remain exposed, when they are expected to 
disappear, or cells to remain highlighted when the highlight is expected to 
disappear.

The main problem is that the onMouseOver and onMouseOut behaviours seem 
inconsistent.  Small variations in mouse movements produce unexpectedly 
different results.  Fast movements in particular seem to confuse it.

There are also some strange behaviour with shifting line breaks and 
inconsistent cell outlines.

Reproducible: Always
Steps to Reproduce:
1. Run the sample HTML given below in "Additional Information".
2. Wait for the log window to appear.  This has no functionality but may be 
useful for debugging.
3. Play the mouse over the top-level menu items and the sub-menus that appear.


Actual Results:  1. Each time the mouse is moved over the menu items, different 
behaviour may occur.
2. Sub-menus do not always disappear on cue.
3. Cell highlighting does not always turn off.
4. A line break unexpectedly appears on the second item of the top-level menu.
5. The third-level menu has strange effects on its borders.


Expected Results:  1. Sub-menus should appear and disappear as the mouse moves 
over the next higher menu item.
2. Cell highlighting should turn on and off as the mouse passes over.


<html>
<head>
<title>Mozilla Error</title>
<style>
.main_menu {
	background-color: white;
	border-color: black;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
}
.menu {
	background-color: white;
	border-color: black;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	margin-top: -6px;
	display: none;
	position: absolute;
}
.item {
	background-color: white;
	border-color: black;
	border-style: solid;
	border-width: 0 0 0 0;
	cursor: hand;
	padding: 5px;
}
</style>
<script language="javascript">
var ewin = window.open
("", "EventTester", "width=300,height=600,scrollbars,resizable,menubar");
var edoc = ewin.document;
edoc.open("text/html");
edoc.writeln("Debug Log<br />");

function enterCell(cell) {
  edoc.writeln("enter " + cell.id + "<br />");
  cell.style.backgroundColor = "pink";
}

function exitCell(cell) {
  edoc.writeln("exit " + cell.id + "<br />");
  cell.style.backgroundColor = "white";
}

function showMenu(menu_id) {
  edoc.writeln("show " + menu_id + "<br />");
  var menu = document.getElementById(menu_id);
  if (menu != null) {
      menu.style.display = "block";
  }
}

function hideMenu(menu_id) {
  edoc.writeln("hide " + menu_id + "<br />");
  var menu = document.getElementById(menu_id);
  if (menu != null) {
      menu.style.display = "none";
  }
}
</script>
</head>

<body>
<p>SPACE</p>
<table>
  <tr>
   <td>
   SPACE
   </td>
   <td>

<!-- Start of menu markup proper -->
<table class="main_menu" cellpadding="0" cellspacing="0" border="0">
 <tr onMouseOver="showMenu('menu.1')" onMouseOut="hideMenu('menu.1')">
  <td id="1" class="item" onMouseOver="enterCell(this)" onMouseOut="exitCell
(this)">
  Menu 1
  </td>
  <td>
   <table id="menu.1" class="menu" cellpadding="0" cellspacing="0" border="0">
    <tr><td id="1.A" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 1.A</td></tr>
    <tr><td id="1.B" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 1.B</td></tr>
    <tr><td id="1.C" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 1.C</td></tr>
   </table>
  </td>
 </tr>
 <tr onMouseOver="showMenu('menu.2')" onMouseOut="hideMenu('menu.2')">
  <td id="2" class="item" onMouseOver="enterCell(this)" onMouseOut="exitCell
(this)">
  Menu 2
  </td>
  <td>
   <table id="menu.2" class="menu" cellpadding="0" cellspacing="0" border="0">
    <tr onMouseOver="showMenu('menu.2.A')" onMouseOut="hideMenu('menu.2.A')">
     <td id="2.A" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">
     Menu 2.A
     </td>
     <td>
      <table id="menu.2.A" class="menu" cellpadding="0" cellspacing="0" 
border="0">
       <tr><td id="2.A.1" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 2.A.1</td></tr>
       <tr><td id="2.A.2" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 2.A.2</td></tr>
       <tr><td id="2.A.3" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 2.A.3</td></tr>
      </table>
     </td>
    </tr>
    <tr><td id="2.B" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 2.B</td></tr>
    <tr><td id="2.C" class="item" onMouseOver="enterCell(this)" 
onMouseOut="exitCell(this)">Item 2.C</td></tr>
   </table>
  </td>
 </tr>
</table>
<!-- End of menu markup proper -->

   </td> 
   <td>
   SPACE SPACE
   </td>
  </tr>
</table>
</body>
</html>
QA Contact: madhur → rakeshmishra
Since this bug was reported, a newer version of Mozilla (1.0 RC1) has been
released. Reporter, please can you check to see whether this bug is still 
present in a recent build (Moz1-RC1 or a new nightly build). If
this bug does not occur please can you resolve the bugreport?

Reporter's original HTML copied and pasted into a file.
I have re-tested against Mozilla 1.0 RC1 on Windows NT and the bug is still 
evident.
I can see this too with RC2, especially points 2 & 3:

3. Cell highlighting does not always turn off.
2. Cell highlighting should turn on and off as the mouse passes over.

this bug should be confirmed
I see some problems with coloring, the rest works fine with me. But several
people commented the see it, so I confirm it.

pi
Status: UNCONFIRMED → NEW
Ever confirmed: true
QA Contact: rakeshmishra → trix
For anyone still interested, I still observe this behavior (bug?) in Win2k
Mozilla nightly trunk build 2003021808, but I do not observe it in Win2k Phoenix
0.5 (Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3b) Gecko/20030206
Phoenix/0.5).
What do those in the know make of this?
.
Assignee: joki → saari
QA Contact: trix → ian
I only observe only one element of the buggy behavior originally reported,
namely, that cells sometimes (but not always) unpredictibly may remain
highlighted when they should not be.  I have finally done some research on this
behavior (observed in Firebird nightlies).  I have changed the log output a
little to make it easier for me to read, but there is still a one-to-one
correspondence between a log line and an event firing.  Below is my log for the
following sequence of events:  I bring the mouse pointer into cell "Menu 1";
then into cell "Item 1.A" on the sub-menu; then back into cell "Menu 1".

Debug Log
~~~~~~~~~
Highlight On- Cell 1     <-- here is where I mouse over cell "Menu 1"
Show Submenu menu.1
Highlight Off- Cell 1    <-- here is where I mouse over cell "Item 1.A"
Hide Submenu menu.1
Highlight On- Cell 1.A
Show Submenu menu.1
Show Submenu menu.1      <-- here is where I mouse back over "Menu 1", fine,
Hide Submenu menu.1         but we don't see "Highlight Off- Cell 1.A"
Highlight On- Cell 1        as expected.
Show Submenu menu.1


I observed that (unexpectedly) cell "Item 1.A" remained highlighted (pink).  The
obvious reason that the cell highlight didn't turn off is a missing onMouseOut
event, and the above log confirms that this is what happened.  I have no idea
what causes this, but at least we know what's (not) going on.


I am using Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6a)
Gecko/20031026 Firebird/0.7+.

By the way, here is the debug log for IE 6:

Debug Log
~~~~~~~~~
Highlight On- Cell 1
Show Submenu menu.1
Highlight Off- Cell 1
Hide Submenu menu.1
Show Submenu menu.1
Hide Submenu menu.1
Highlight On- Cell 1.A   
Show Submenu menu.1
Highlight Off- Cell 1.A     <-- this is what Mozilla frequently does not do
Hide Submenu menu.1
Show Submenu menu.1
Hide Submenu menu.1
Highlight On- Cell 1
Show Submenu menu.1

Actually, both IE and Mozilla had all kinds of "Hide Submenu menu.1"/"Show
Submenu menu.1" events that don't seem like they should happen, but these don't
seem to hurt anything (these extraneous events always come in pairs, always come
when the menu is supposed to be shown, and hide always comes before show, with
the effect that the extra hide events are cancelled).  But IE always turns off a
cell's highlight when we expect it to.

Now hopefully someone will come along who actually knows what to do with this
information.
Assignee: saari → nobody
QA Contact: ian → events
Component: Event Handling → User events and focus handling
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: