Thursday, June 3, 2010

DOM Events for HTML Radio Buttons

An interesting bug came up today, and it had to do with the way IE 8 processes DOM events differently than the other browsers.

Here's the scenario:

We were attaching to a radio button's onchange event to do some processing. When you click on an option, we show you a particular div relevant to your selected option. This worked just fine on Firefox and Chrome, but was wacky on IE8. It turns out that IE8 doesn't seem to fire the onchange DOM event until after the element *loses focus*, meaning that our divs didn't show up until we clicked somewhere else on the screen.

We fixed the issue by switching to the onclick event, which fires nicely, on the click, as you would expect, on all three browsers.

In summary: when you want to trigger something when a user selects one of your radio buttons, attach to the onclick event, and not the onchange event, which has variable behavior across browsers.

20 comments:

gocod said...

Habit is a second nature...................................................

黃峻帆 said...

精彩的部落格 要繼續加油 ..............................

淑慧 said...

仇恨是一把雙刃劍,傷了別人,也傷了自己..................................................................

戴昀德 said...

被人揭下面具是一種失敗,自己揭下面具卻是種勝利。...............................................................

陳隆 said...

所有的資產,在不被諒解時,都成了負債.................................................................                           

江婷 said...

知識可以傳授,智慧卻不行。每個人必須成為他自己。......................................................................

王名仁 said...

當一個人內心能容納兩樣相互衝突的東西,這個人便開始變得有價值了。............................................................

江冠彭珮李佳宏陽筠 said...

教育的目的,不在應該思考什麼,而是教吾人怎樣思考............................................................

JasonBirk佳琪 said...

夜光杯中飲美酒 蝸牛牆邊爬上架 新疆醉人馬奶子 青鳥銜之上金井............................................................

吳婷婷 said...

好文章給我好心情,謝謝分享~~............................................................

楊儀卉 said...

Look before you leap.............................................................

楊儀卉 said...

這不過是滑一跤,並不是死掉而爬不起來了。.......................................................

林彥以林彥以 said...

Good mind, good find...................................................

alv賴arez冠bar伶rett said...

來看看你囉~blog很棒! ..................................................................

夏瓊陳詩蓁富 said...

教育無他,愛與榜樣而已............................................................

毛彥宇毛彥宇 said...

生命如夏花洵爛;死如秋葉之靜美。.......................................................

承王蓁 said...

It is easier to get than to keep it.......................................................................

思張張亦 said...

Pen and ink is wits plough...................................................................

張鴻黃淑娟水 said...

知識可以傳授,智慧卻不行。每個人必須成為他自己。............................................................

esthermelvin said...

看著你的BLOG 好多朋友都回應 真厲害..................................................