让ie的<option>支持click事件(转)

众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的.
(safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.)

虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价.
因为onchange只有在 你点击的option和之前的option不同时才会触发.
当select当前选中的是第一项 而你再次点击第一项时, select是不会被触发的.


下面的代码演示了一种间接实现 option onclick的方法

注意:此方案只适用于　下拉方式的单选select.

 1     1.  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >     
 2     2.     < html >     
 3     3.     < head >     
 4     4.      < title > select-option onclick  </ title >     
 5     5.    < script  type ="text/javascript"   >     
 6      6 .      
 7      7 .    function  simOptionClick4IE(){    
 8      8 .        var  evt = window.event  ;    
 9      9 .      var  selectObj = evt ? evt.srcElement: null ;    
10     10 .        //  IE Only    
11     11 .        if  (evt  &&  selectObj  &&   evt.offsetY  &&  evt.button != 2     
12     12 .          &&  (evt.offsetY  >  selectObj.offsetHeight  ||  evt.offsetY < 0  ) ) {    
13     13 .                 
14     14 .                //  记录原先的选中项    
15     15 .               var  oldIdx  =  selectObj.selectedIndex;    
16     16 .   
17     17 .            setTimeout( function (){    
18     18 .                   var  option = selectObj.options[selectObj.selectedIndex];    
19     19 .                 //  此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex    
20     20 .                //  来判断用户是不是点击了同一个选项,进而做不同的处理.    
21     21 .                  showOptionValue(option)    
22     22 .     
23     23 .             },  60 );    
24     24 .      }    
25     25 . }    
26     26 .    
27     27 .    function  showOptionValue(opt,msg){    
28     28 .       var  now = new  Date();    
29     29 .        var  dt =  ( 1900 + now.getYear()) + ' - ' + (now.getMonth() + 1 ) + ' - ' + now.getDate() +     
30     30 .               '   ' + now.getHours() + ' : ' + now.getHours() + ' : ' + now.getSeconds() + ' . ' + now.getMilliseconds();    
31     31 .      var  resultZone = document.getElementById( ' reslut ' );    
32     32 .      resultZone.style.margin = " 10px " ;    
33     33 .      resultZone.innerHTML = dt  + "  时,点击了:  "   +  (opt.text  +   '  =  ' + opt.value);    
34     34 . }    
35     35 .     
36     36 .  </ script >     
37    37.  </ head >     
38    38.     
39    39.  < body >     
40    40.       
41    41.      < select   onclick ="simOptionClick4IE()"   >      
42    42.        <!--  下面的 οnclick="showOptionValue( this )" 是为 ff 和 opera而准备  -->     
43    43.       < option  value ="1"  onclick ="showOptionValue( this )"   > aaaaa </ option >     
44    44.     < option  value ="2"  onclick ="showOptionValue( this )"   > bbbbb </ option >     
45    45.        < option  value ="3"  onclick ="showOptionValue( this )"   > ccccc </ option >     
46    46.     </ select >     
47    47.     
48    48.   < div  id ="reslut"   ></ div >     
49    49.    </ body >     
50    50.   </ html >    

 

转载于:https://www.cnblogs.com/tonywang711/archive/2009/11/05/optionclick.html