IE下option的onclick事件

onTheJavaWay

浏览: 18608 次
性别:
来自: 西安

最近访客更多访客>>

suncong1024

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

IE Google Firefox Opera REST

最近在实现一个小功能时碰到了问题：想让用户通过点击一个下拉列表来打开一个新窗口。下面是简单的代码示例：

<select>
  <option on
click="test('www.hao123.com')"  value="www.hao123.com">hao123</option>
  <option on click="test('www.baidu.com')"  value="www.baidu.com">baidu</option>
  <option on click="test('www.google.com')"  value="www.google.com">google</option>
</select>

<script type="text/javas cript">
function test(s)
{
   window.open(s);
}
</script>

但是运行是：Firefox下能正常运行，IE6、IE7下不能运行，且没有报错。

最后发现了问题所在：在IE里，select的 option 是不支持on click 事件的，而在Firefox和 OPERA 里, option 是支持on click 事件的。
那么应该怎么实现原设定的功能？用Select元素的onchange事件。这时主要是考虑如何获得被选中的选项所代表的链接。
修改后代码如下：

<select id="friendLink" on change="test()>
  <option  value="www.hao123.com">hao123</option>
  <option  value="www.baidu.com">baidu</option>
  <option  value="www.google.com">google</option>
</select>

<script type="text/javas cript">
function test()
{
  var targetSlect=document.getElementById("friendLink");
  var targetHref=targetSlect.options[targetSlect.selectedIndex].value;
  window.open(targetHref);
}
</script>

以上的思想来自于：
Remove the events from the options , use an event directly on the select instead.

Internet Explorer treats select boxes slightly different than the rest of the document, (if you've ever read anyhting about "windowed controlls" you know what I'm talking about)

I'm thinking IE doesn't notice events in childnodes of select elements, on ly the select elements themselves.

I normally setup my functions to work depending on either of the selects value or selectedIndex attribute & using the onchange event.

PS：
虽然onchange在某些时刻可以代替 option 的click事件 , 但是两者并无法做到完全等价. 因为onchange只有在你点击的option 和之前的option 不同时才会触发. 当select当前选中的是第一项而你再次点击第一项时, select是不会被触发的. 下面的代码演示了一种间接实现 option onclick的方法注意:此方案只适用于下拉方式的单选select.

<script type="text/javascript" >   
 
function simOptionClick4IE(){    
    var evt=window.event  ;    
    var selectObj=evt?evt.srcElement:null;    
    // IE Only    
    if (evt && selectObj &&  evt.offsetY && evt.button!=2    
        && (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {    
                
            // 记录原先的选中项    
            var oldIdx = selectObj.selectedIndex;    
   
            setTimeout(function(){    
                var option=selectObj.options[selectObj.selectedIndex];    
                // 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex    
                // 来判断用户是不是点击了同一个选项,进而做不同的处理.    
                showOptionValue(option)    
   
            }, 60);    
    }    
}    
   
function showOptionValue(opt,msg){    
    var now=new Date();    
    var dt= (1900+now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate()+    
            ' '+now.getHours()+':'+now.getHours()+':'+now.getSeconds()+'.'+now.getMilliseconds();    
    var resultZone=document.getElementById('reslut');    
    resultZone.style.margin="10px";    
    resultZone.innerHTML=dt +" 时,点击了: " + (opt.text + ' = '+opt.value);  
　//这里可以进行很多处理，比如我要点击一个OPTION就打开一个网页，则可以这样写 
    location=opt.value; 
}    
   
</script>   
 </head>   
   
 <body>   
   
  <select  onclick="simOptionClick4IE()" >     
    <!-- 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 -->   
    <option value=http://www.5566.org onclick="showOptionValue( this )" >aaaaa</option>   
    <option value=http://www.sina.com.cn onclick="showOptionValue( this )" >bbbbb</option>   
    <option value="http://www.csdn.net" onclick="showOptionValue( this )" >ccccc</option>   
  </select>   
<!--
   如果想让select 支持双击事件，则修改为：
   <select name="items"  multiple ondblclick="alert(this.value);">
       <option value="yourvalue">1</option>
       <option value="yourvalue">2</option>
   </select>
-->
<div id="reslut" ></div>

以上补充说明来自http://www.cnblogs.com/interdrp/archive/2009/08/03/1537930.html

分享到：