Site Navigation

Showing posts with label events. Show all posts
Showing posts with label events. Show all posts

Thursday, July 17, 2008

bug 249 - you can't press Tab in IE and capture it

Issue: #249
Affects: IE6, IE7, IE8 Beta 1

Believe it or not, you can't capture the keypress event for the Tab key in IE (any version).

Are you serious? I hear you ask... well, lets make proving this fun.

In the following textarea, type in any key... you'll get $5* for any key, but you'll get $2,500* for pressing the Tab key.

Example:

Winnings!
$



You can make a boatload of cash in Firefox, Safari, Opera and Konqueror but you'll never get a $2,500 payout in IE.


Known Workarounds: None. If you want to capture the Tab key, you'll need to capture the keydown and keyup events instead.



*All currency is of the imaginary non-legal currency type.

Related Issues: None.


Bug/Site Feedback |
Submit a bug

Tuesday, July 15, 2008

bug 149 - no DOM Level 2 Mutation Events in IE

Issue: #149
Affects: IE6, IE7, IE8 Beta 1

The W3C specs for (W3C DOM2 Mutation Events) (Nov 2000) specify events that allow developers to listen for changes in the DOM, so that they can apply JavaScript on-demand, as needed.

In particular, noting when a DOM element has children added or changed are the key moments developers would like to be able to apply a sprinkle of JS.

Being able to use these events would be fantastic, but support for them in IE is non-existent at the moment.



Known Workarounds: None.



Related Issues: None.


Bug/Site Feedback |
Submit a bug

Saturday, March 22, 2008

bug 279 - onload event for images might not happen

Issue: #279
Affects: IE6, IE7, Opera (ver?)

When you add an image to a page dynamically (via the DOM) and you set the .src attribute, if IE/Opera has it in the cache it is loaded instantly, thus if you set an event handler to catch the onload after setting the source, you're onload event may never fire.

Example:

<script type="text/javascript">
var myImg = document.getElementsByTagName('img')[0];
myImg.src = 'highlight.png';
myImg.onload = function(){
alert('image loaded!');
}
</script>



Known Workarounds: One. Move the event handler up to a position before the .src is declared.

Example Workaround Code:

<script type="text/javascript">
var myImg = document.getElementsByTagName('img')[0];
myImg.onload = function(){
alert('image loaded!');
}
//define src "after" the onload handler
myImg.src = 'highlight.png';
</script>



Related Issues: None.

Bug/Site Feedback |
Submit a bug

Tuesday, March 18, 2008

bug 126 - no W3C DOM Level 2 Event Listeners

Issue: #126
Affects: IE6, IE7, IE 8 Beta 1
MSIE Feedback ID: 333958


The W3C published the specs for (W3C DOM2 Event Listeners) on or before November 13th, 2000. This means that the spec has been available for over seven years. When it wasn't present in IE6, the development community couldn't complain. When it was omitted from IE7 (they were still too busy trying to catch up) it was unfortunate, but accepted. However we are now at the dawn of IE8 (currently in Beta) and there is still no sign of DOM2 Event Listeners. Therefore this is no longer just a "we haven't had the time yet" or "we have higher priorities" issue, this is now a genuine bug!

Example:

<script type="text/javascript">
var obj = document.getElementById('foo');
obj.addEventListener('click', myClickHandler, false );
</script>



Known Workarounds: One. Create your own "addEvent" function that attempts to best handle IE's missing implementation by wrapping "attachEvent" in a cross-browser implementation.

Example Workaround Code:

//soon



Related Issues: (bug 186).

Bug/Site Feedback |
Submit a bug

Sunday, February 17, 2008

bug 229 - not everything is absolute in IE

Issue: #229
Affects: IE6, IE7
Fixed in: IE8 Beta 1

The css "position:absolute" property works well to position a block element in an exact location on screen. However reader Xogede pointed out to us that there are scenarios where IE displays the element correctly, but it doesn't fire events on the element unless the event was triggered on the "text" portion inside the element.

To see this in action, save the code below and open it up in IE6 or IE7. If you click on the text, the onclick event fires and you'll see an alert. If you click anywhere else inside the DIV no event will fire. I've set the cursor to "pointer" so that you can see exactly where the event will fire, but it will turn to the default arrow anywhere that the event firing will fail. Load it up in any other browser and you can click anywhere in the DIV to fire the event.

Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>bug 229 - not everything is absolute in IE</title>
</head>
<body>
<div style="position:absolute;cursor:pointer;top:10px;left:10px;width:200px;border:1px solid black;height:50px;" onclick="alert('Clicked!')">Absolute</div>
</body>
</html>


What is truly odd about this bug, is that it happens in Standards Mode (you know, the one that is supposed to be "closest" to the specs).

The good news is, that this bug can be fixed. All you need to do is specify a background color, e.g. just add this to the DIV's style attribute:
"background-color:#ffffff;"


Known Workarounds: One. Set a background color.

Example Workaround Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>bug 229 - not everything is absolute in IE</title>
</head>
<body>
<div style="position:absolute;cursor:pointer;top:10px;left:10px;width:200px;border:1px solid black;height:50px;background-color:#fffedf;" onclick="alert('Clicked!')">Absolute</div>
</body>
</html>



Related Issues: None.


Bug/Site Feedback |
Submit a bug

Wednesday, January 30, 2008

bug 263 - beware of DoubleClick in IE

Issue: #263
Affects: IE6, IE7, IE8 Beta 1

Attempting to track events in the process of a doubleclick event in IE will be entertaining to say the least.

The normal sequence of events fired leading up to a doubleclick go as follows.

  • mousedown

  • mouseup

  • click

  • mousedown

  • mouseup

  • click

  • doubleclick



but in IE, if you doubleclick on a link, and image or any element, the events fired are:

  • mousedown

  • mouseup

  • click

  • mousedown

  • mouseup

  • click

  • doubleclick



Thats right, no second mousedown?, and no second click!
As a developer, if you are tracking mousedown, mouseup, and click events... you need to be aware of this because if your users doubleclick by accident any actions that are designed to "stop" onmouseup might try and reference something that wasn't started... and if the onclick was being used to quit listening for example... that event may never fire.

Example:


Double Click Me To Test!


Event Log



Known Workarounds: None.



Related Issues: None.

Bug/Site Feedback |
Submit a bug

Wednesday, November 14, 2007

bug 280 - lack of events for options

Issue: #280
Affects: IE5, IE5.5, IE6, IE7, IE8 Beta 1, Opera, Safari, ?

The option element is used inside a select element to provide options for the user to select from. Like all visually displayed elements in the browser, you can attach event handlers to them too.

Well, not quite. The following table indicates the level of support for each browser, and event.








EventFirefoxInternet
Explorer
KonquerorOperaSafari
onclickYesNo?YesNo
onmouseoverYesNo?No (v9.5 Yes!)No
onmouseoutYesNo?No (v9.5 Yes!)No
keyupNoNo?NoNo
keydownNoNo?NoNo
keypressNoNo?NoNo


Only Firefox seems to support the full array of mouse events, Opera is next supporting an onclick event, but in IE and Safari(win) there is no support for mouse events on options.

Oddly enough, no browser seems to support keyboard events on options.

View the following samples in Firefox, Safari or Opera and IE.

Example:






Known Workarounds: None.

Related Issues: bug 291.

Tuesday, November 6, 2007

bug 193 - onchange does not fire properly on IE radio buttons and checkboxes

Issue: #193
Affects: IE5, IE5.5, IE6, IE7, IE8 Beta 1

The onchange event can be attached (inline or as an event handler) to any form element. It fires whenever the value of the form field changes. Unfortunately, the behavior is a bit strange in IE, in that for a checkbox, or a radio button field, the event doesn't fire when it is supposed to (right when you click the option you want to choose), but instead it only fires, when you click elsewhere on the page/form, or if you explicitly call blur(); on the field.

Example:

<input type="radio" name="foo" value="Green" onchange="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onchange="alert(this.value);"/>Blue


As soon as you click on either of these radio buttons, the alert should pop up telling you what you just selected.

Try it out!

Green

Blue

You'll notice that it works just fine in all browsers except Internet Explorer. In fact, in IE, clicking once will not pop up the alert, but clicking the other radio button will pop up the alert, but the value is the last radio button clicked.


Known Workarounds: One. Instead of using the onchange event, use the onclick event for radio and checkbox elements instead (or at least for IE)

Example Workaround Code:

<input type="radio" name="foo" value="Green" onclick="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onclick="alert(this.value);"/>Blue


Test this version with onclick:
Green

Blue


Related Issues: None.

Monday, October 29, 2007

bug 104 - resize event firing errors in IE on Maximize or Restore

Issue: #104
Affects: IE5, IE5.5, IE6, IE7
Partially Fixed in: IE7* (see details below)

The resize event when applied to the window, will fire when the browser is resized.

In IE, it fires continually while stretching a window, and in other browsers only when the dragging stops and a new window size is set. (this isn't the bug, just a minor difference in the way each browser works)

The bug, is that IE will fire multiple resize events for a single resize of the browser, when Maximizing or Restoring the window.

In IE6, a Maximize or Restore window setting will trigger 3 (three!) resize events.

You can do this by right-clicking the task bar and choosing from the context menu, or by double-clicking the title bar of the browser.

In IE7, they fixed this! Well, not quite. In IE7, it now fires 2 (two!) resize events. Well, I suppose that 1 invalid resize event, is better than 2 invalid resize events, but suffice to say, there is still a significant bug here.


Example:

<script>
window.onresize = function(){
alert('resizing: Offset: ' +
document.body.offsetWidth + ', ' +
document.body.offsetHeight +
'\nScroll: ' +
document.body.scrollWidth + ', ' +
document.body.scrollHeight);
};
</script>



Known Workarounds: None. If you need to ensure that a function is called only once for this kind of resize, you may want to store the current width and height dimensions as variables, then onresize, compare them against the stored size. If they are both a match, ignore the event. (e.g. there was no resize)


Related Issues: None.