Site Navigation

Home | Welcome | FAQ | Submit a bug | Site Feedback |
Showing posts with label onclick. Show all posts
Showing posts with label onclick. Show all posts

Thursday, February 26, 2009

bug 487 - onclick/onfocus bugs on select elements in IE, Chrome & Safari

Issue: #487
Fully Affects: IE6, IE7, IE8, IE9, IE10
Partially Affects: Chrome, Safari

The select form control is great for providing options for a user to select from. You can "enforce" validation simply by what you allow for selection, and the control itself is quite keyboard/mouse friendly with a predictable behavior across all browsers.

Well not quite. IE has a bug with setting an onclick or onfocus event handler on a select element in that if any changes are made to the child options of the select, the first attempt to open the select list with the mouse will fail.

It doesn't matter if you are dynamically populating the selects' options from a JavaScript array or an AJAX request, or removing options that are no longer valid.

In Chrome, the onfocus event works just fine, but the onclick event, won't alter the select field's options until the list is collapsed (e.g. when it closes).

In Safari 4 Beta (need to confirm for Safari 3.x), the onfocus event works fine just like Chrome, but the onclick event never alters the options list at all, no matter how many times it is clicked on.

Try the following samples out, both will not let you open the select list on the first click in IE, and the onclick list will behave oddly in Chrome/Safari. (For this test, we are simply cropping the length of the list) both lists originally have options 100,200,300,400,500,600.

Example:
OnClick Test:


OnFoucs Test:


Known Workarounds: One partial fix would be to use the onmousedown event instead of the onclick event, this will fix the IE issue, but only for mouse interaction. Keep in mind that due to (bug 280) there may be significant challenges creating a workaround for this bug.



Related Issues: (bug 280).


Bug/Site Feedback |
Submit a bug
Posted by xyz at 5:18 AM
Labels: , , , , , , ,

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
Posted by xyz at 7:38 AM
Labels: , , , , , ,

Wednesday, January 30, 2008

bug 263 - beware of DoubleClick in IE

Issue: #263
Affects: IE6, IE7, IE8, IE9 PP1, IE9 PP2, IE9 PP3
Fixed In: IE9 Platform Preview 4 both the extra mousedown and click events now fire!

Satus Update: IE9 Platform Preview 2 shows some improvement and actually does fire the 2nd mousedown event - however it still does not fire the 2nd click event.

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
Posted by xyz at 8:23 PM
Labels: , , , , , ,

Wednesday, November 14, 2007

bug 280 - lack of events for options

Issue: #280
Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4, IE9 RC 1, Opera, Safari 3, Safari 4 Beta, Chrome v1, ?
Partially Fixed in: Opera 9.5-9.64 (onclick, onmouseover, onmouseout, onmousedown, onmouseup fixed!)
Partially Fixed in: Safari 4.0 (onclick, onmouseover, onmouseout, onmousedown, onmouseup fixed!)
Partially Fixed in: Chrome 2.0 (onclick, onmouseover, onmouseout, onmousedown, onmouseup fixed!)


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		KonquerorOperaSafariChrome
onclickYesNo?YesNo (v4.0 Yes!)No (v2.0 yes!)
onmouseoverYesNo?No (v9.5 Yes!)No (v4.0 Yes!)No (v2.0 yes!)
onmouseoutYesNo?No (v9.5 Yes!)No (v4.0 Yes!)No (v2.0 yes!)
onmousedownYesNo?No (v9.64 Yes!)No (v4.0 Yes!)No (v2.0 yes!)
onmouseupYesNo?No (v9.64 Yes!)No (v4.0 Yes!)No (v2.0 yes!)
keyupNoNo?NoNoNo
keydownNoNo?NoNoNo
keypressNoNo?NoNoNo


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.
Posted by xyz at 7:28 AM
Labels: , , , , , , , , , , , , , ,

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, IE9 PP4
Fixed in: IE9 RC 1 (in IE9 standards mode only)

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.
Posted by xyz at 5:56 PM
Labels: , , , , , , , ,
Subscribe to: Posts (Atom)