让IE的OPTION支持click事件

原文链接: http://fins.javaeye.com/blog/198977
 
众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的. (safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.) 虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项 而你再次点击第一项时, select是不会被触发的. 下面的代码演示了一种间接实现 option onclick的方法 注意:此方案只适用于 下拉方式的单选select.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.  <head>  
  4.   <title>select-option onclick </title>  
  5. <script type="text/javascript" >  
  6.   
  7. function simOptionClick4IE(){   
  8.     var evt=window.event  ;   
  9.     var selectObj=evt?evt.srcElement:null;   
  10.     // IE Only   
  11.     if (evt && selectObj &&  evt.offsetY && evt.button!=2   
  12.         && (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {   
  13.                
  14.             // 记录原先的选中项   
  15.             var oldIdx = selectObj.selectedIndex;   
  16.   
  17.             setTimeout(function(){   
  18.                 var option=selectObj.options[selectObj.selectedIndex];   
  19.                 // 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex   
  20.                 // 来判断用户是不是点击了同一个选项,进而做不同的处理.   
  21.                 showOptionValue(option)   
  22.   
  23.             }, 60);   
  24.     }   
  25. }   
  26.   
  27. function showOptionValue(opt,msg){   
  28.     var now=new Date();   
  29.     var dt= (1900+now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate()+   
  30.             ' '+now.getHours()+':'+now.getHours()+':'+now.getSeconds()+'.'+now.getMilliseconds();   
  31.     var resultZone=document.getElementById('reslut');   
  32.     resultZone.style.margin="10px";   
  33.     resultZone.innerHTML=dt +" 时,点击了: " + (opt.text + ' = '+opt.value); 
  34.  //这里可以进行很多处理,比如我要点击一个OPTION就打开一个网页,则可以这样写
  35.     location=opt.value;
  36. }   
  37.   
  38. </script>  
  39.  </head>  
  40.   
  41.  <body>  
  42.   
  43.   <select  onclick="simOptionClick4IE()" >    
  44.     <!-- 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 -->  
  45.     <option value=http://www.5566.org onclick="showOptionValue( this )" >aaaaa</option>  
  46.     <option value=http://www.sina.com.cn onclick="showOptionValue( this )" >bbbbb</option>  
  47.     <option value="http://www.csdn.net" onclick="showOptionValue( this )" >ccccc</option>  
  48.   </select>  
  49.   
  50. <div id="reslut" ></div>  
  51. </body>  
  52. </html>

你可能感兴趣的:(让IE的OPTION支持click事件)