in IE7 mouseout handler unexpected reset a select-control

Reported by:	golden	Owned by:
Priority:	minor	Milestone:	1.1.4
Component:	event	Version:	1.1.3
Keywords:	ie7 select event css mouseout	Cc:
Blocked by:		Blocking:

Description

Only for IE7 (tested in 7.0.5730.11)

Please see example page and try to select any value in select-box:

http://goldenman.spb.ru/development/jquery/bug_select/test.html

The select-box has binded handler for mouseout event which is trying to modify CSS properties of itself.

However in IE mouseover event happens earlier then user can choose proper value in select-box.

The problem is that mouseout handler of select-box is modifying CSS properties of itself that arise unexpected reset of select-box before user can select need value.

If remove CSS modifying code, it will work fine.

Attachments (0)

Change History (4)

Changed August 24, 2007 06:25AM UTC by arrix comment:1

In IE, mouseout event of a parent element triggers when you mouse over its child elements and YUI has normalized this issue.

see http://www.fitzblog.com/tabid/17782/bid/2127/Nine-Javascript-Gotchas.aspx bulletin 5

Modifying css will collapse the dropdown in IE. This is hard to fix.

Changed February 17, 2008 06:47AM UTC by brandon comment:2

Try using the new mouseenter and mouseleave events added in 1.2.2.

Changed January 18, 2009 01:31AM UTC by dmethvin comment:3

resolution:	→ wontfix
status:	new → closed

I verified that the mouseenter/leave events don't fix the problem on jQuery 1.3. As soon as the mouse leaves the original select area in order to select a dropdown item below it, the select box resets due to the .css() change. Happens on IE8B2 as well. Raw DOM does the same thing so it isn't a jQuery-specific bug.

Interestingly, IE8 will not even style the select with select:hover { color: red } although IE8 seems to support hover in most other situations. Everything works fine both ways on FF3 and Chrome.

This looks like an unfixable IE problem.

Changed February 03, 2011 02:09AM UTC by anonymous comment:4

Resolution

1. Use mousedown to on selection

2. Use dblclick after selection jQuery 1.5

Side navigation