Focus events incorrectly fire when you click the scroll bar in DIV in IFRAME (818505)


The information in this article applies to:

  • Microsoft Internet Explorer 6.0
  • Microsoft Internet Explorer 6.0 SP1

SYMPTOMS

When all the following conditions are true, and the user clicks the scroll bar in the DIV element while focus is on the text box, the onblur and onbeforedeactivate events for the text box fire, and the onfocus event for the DIV element fires, but the pointer still stays on the text box:
  • An HTML page contains an IFRAME element.
  • The IFRAME element contains a DIV element that has a scroll bar.
  • The HTML page also contains a text box.

CAUSE

There is a bug in the event handling mechanism in Microsoft Internet Explorer that causes these events to fire when they should not.

WORKAROUND

To work around this problem, use one of the following methods:
  • Do not rely on these events.
  • Do not make the scroll bar available if the focus is not in the IFRAME element. For an example of how to do this, see the "More Information" section.

STATUS

Microsoft has confirmed that this is a bug in the Microsoft products that are listed in the "Applies to" section.

MORE INFORMATION

Steps to reproduce the problem

  1. Create an HTML page that contains the following code:
    <html>
<body onload="text1.focus()">
Expected behavior<br>
<li>When clicking scroll bars in IFRAME or DIV, 
the focus functions do not fire and the text box remains in focus.</li>
<br><br>
Actual behavior<br>
<li>When you click scroll bars in the DIV element, the focus 
functions do fire, and the text box remains in focus.</li>
<br><br>
<input type="checkbox" id="fix">Use workaround</input><br>
<input type="text" id="text1"
	onblur="body.insertAdjacentHTML('beforeend', 'text1 onblur fired.<br>')"
	onbeforedeactivate="body.insertAdjacentHTML('beforeend', 'text1 onbeforedeactivate fired. <br>')">
<br>
<iframe id="f1" src="iframe.htm" height="400"
	onfocus="if (fix.checked) f1.mydiv.style.overflowY='scroll'"
	onblur="if (fix.checked) f1.mydiv.style.overflowY='hidden'">
</iframe>
</body>
</html>
  2. Create the HTML page for Iframe.htm by using the following code:
    <html>
<body>
<div id="mydiv" 
	style="height: 150px; background-color: gray;overflow-y: scroll"
	onfocus="body.insertAdjacentHTML('afterbegin', 'div onfocus fired.<br>')">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
  3. Open the page in Internet Explorer. Make sure that the Use workaround check box is cleared.
  4. To see the problem, click the scroll bar in the DIV element that is inside the IFRAME element. Notice that the events fire, but the pointer is still in the text box.
  5. Click to select the Use workaround check box, click one time inside the IFRAME element, and then click one time outside the IFRAME element to remove the DIV element scroll bar.
The workaround involves dynamically adding the scroll bar of the DIV element if the IFRAME element has focus. Because the DIV element scroll bar does not now exist, you cannot experience the problem. If you click the DIV element, or if you click inside the IFRAME element, the events will still fire, but the focus is no longer on the text box. Notice that the scroll bar for the DIV element also appears. The one drawback to this workaround is that the user cannot scroll the DIV element content while keeping focus on the text box.
Modification Type:MinorLast Reviewed:11/1/2005
Keywords:kbHotfixServer kbQFE kbIE600sp2fix kbIE600preSP2fix kbfix kbbug KB818505 kbAudDeveloper
©2004 Microsoft Corporation. All rights reserved.