鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 424, 文章 - 231, 评论 - 5407, 引用 - 344
数据加载中……

在使用optgroup时遇到的缺陷与修复

    在IE6.0里微软提供对HTML4.0中定义元素optgroup的支持，不过当我今天使用optgroup时，居然发现其在事件处理上存在bug。该bug影响select元素上的onchange事件，具体表现及处理如下。

    我们看一下这个带有optgroup的select事例： 
   

    HTML代码及演示脚本如下：
<html>
<head>
    <title>optgroup demo</title>
    <meta name="author" content="birdshome@cnblogs" />
</head>
<body>
    <select size="11" style="width: 150px">
        <optgroup label="Group01">
            <option>Option01 Item</option>
        </optgroup>
        <optgroup label="Group02">
            <option>Option02 Item</option>
        </optgroup>
        <optgroup label="Group03">
            <option>Option03 Item</option>
            <option>Option04 Item</option>
        </optgroup>
        <optgroup label="Group04">
            <option>Option05 Item</option>
            <option>Option06 Item</option>
            <option>Option07 Item</option>
        </optgroup>
    </select>
    <script language="javascript"></script>
</body>
</html>

    本演示示例的意图是当select上的选中的条目一旦改变，就执行一次doChange()方法。你可以点击列表框中的条目并注意一下状态栏，是不是每一次点击都会使数字加一？这是我们希望的效果，同时也说明onchange事件响应是正确的。这时如果你换用键盘上下键来移动列表框中的条目，继续注意状态栏，您会发现什么？状态栏数字的变化没有规律了，说明doChange()方法不总是在随条目状态改变而执行。仔细观察，会发现如果使用鼠标使在Group0n这样的条目上下移动时，select元素的onchange事件不会促发。不过此时select元素的selectedIndex属性指示状态是正确的，真是一个烦人的bug。

    怎样修复这个缺陷呢？如果我们使用了optgroup这个元素，为了确保onchange事件不被遗漏，我们同时响应select元素的键盘事件就可以了。为了能监测selectedIndex的改变，我们需要使用select的onkeyup事件(因为这个事件在onchange之后触发)，可是如果我们简单的同时注册这两个事件，似乎还是有问题的说。看下面的例子，我们把onkeyup也等于了doChange()方法。
     

    使用键盘操作条目，会在原来正常的地方出问题，就是doChange()方法会被触发两次。上面我们不是说了为什么一定要使用onkeyup监视键盘吗？就是因为onkeyup事件在onchange事件之后执行，所以我们可以利用这个事件触发顺序，自己来检测onchange事件是否已执行。效果如下：
     
    
    修复bug的脚本代码为：
<script language="javascript">
var g_count = 0;
slt.onchange = doChange;
slt.onkeyup = doKeyup;

function doChange(elmt)
{
    elmt.__selectedIndex = elmt.selectedIndex;
    
    status = g_count++;
}

function doKeyup(elmt)
{
    if ( elmt.__selectedIndex != elmt.selectedIndex )
    {
        doChange(elmt);
    }
}
</script>

posted on 2005-06-02 23:46 birdshome 阅读(2850) 评论(5)  编辑 收藏 所属分类: Jscript&Dhtml开发 、开发中遇到的虫子

评论

#1楼    回复  引用  查看    

俺觉得这个目前来说用处不大，但做为技术研究还是很不错的。
毕竟，现在IE6.0要求太高了。
我看还不自己写一个这样的控件好了。自己写的，能实实在在的把握。
当然，楼主也知道，这方面的控件网上一大把呢。不是吗？
2005-06-03 09:48 | Vokobo      

#2楼 [楼主]   回复  引用  查看    

@Vokobo
bug是程序中不可获缺的一个组成部分，我们只能肯定的一件事是：发现了bug还是没有发现。而不能肯定：有还是没有bug。
IE6.0其实说高就高，说不高也不高。我们不因为M$有bug就reinvent wheel，因为我们并不能保证比M$的测试充分。是不是呢？
2005-06-03 10:07 | birdshome      

#3楼    回复  引用    

放弃IE吧！
2008-06-15 14:40 | kkp [未注册用户]

#4楼    回复  引用    

用 mouse scroll 會有問題
2008-08-13 16:44 | heaven chen [未注册用户]

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
   博客园首页

  新闻频道

  社区

  小组

  博问

  网摘

  闪存
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2005-06-03 09:26 编辑过
成果网帮您增加网站收入


相关链接:

最新IT新闻:
Google申请“海上数据中心”专利 可能付诸行动
用Google Earth实时追踪人造卫星
传IBM将以35亿美元至40亿美元收购北电
Google卫星已经开始工作
Chrome又曝漏洞 “保存为”功能“引狼入室”