IE的option标签单击事件无法触发的解决方法

最新推荐文章于 2023-06-21 13:53:02 发布

tc471062304

最新推荐文章于 2023-06-21 13:53:02 发布

阅读量1.5k

点赞数

说明：

1、下面使用的代码仅适用于于IE浏览器，测试环境为IE8.

2、下面的代码来自于网络，我做了下闭包的整合

情景说明：

对于这样的一个select标签：

[html]view plaincopy 
   
 <select id="s">  
   <option onkeydown="onkeyDown(this)" onkeypress="onkeyPress(o)" onkeyup="onkeyUp(o)"  
     value="文化">文化</option>  
   <option onkeydown="onkeyDown(this)" onkeypress="onkeyPress(o)" onkeyup="onkeyUp(o)"  
     value="科技">科技</option>  
 </select>  

当我们选择了“文化”的时候，会触发select的onchange事件，但是如果我们再次选择“文化”，不会有任何的事情发生。

对于大多数的应用场景来说，这样就足够了，但是在某些特殊的情况下，我们想让每次的select控件的选择都产生事件，并且返回被选中的option的value，哪怕这次选中的option和上次选的option是一样的。

所以，综合网上现有的代码，我进行了一下包装，代码不限制使用，完全公开（ps：写的很烂）：

[javascript]view plaincopy 
   
 function addEventHandle(sID,oFunction) {  
   var o = document.getElementById(sID);  
   if (!o) return;  
   (function() {  
     o.onclick = function() {  
       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)) {  
         // 记录原先的选中项  
         setTimeout(function() {  
           var option = selectObj.options[selectObj.selectedIndex];  
           oFunction(option)  
         }, 60);  
       }  
     }  
   }  
   )();  
 }  

使用范例【用于IE8等IE的内核】

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>测试Option选择事件</title>  
   
   <script type="text/javascript" src="TableProcess.js"></script>  
   
   <script language="JavaScript" type="text/javascript">  
     //传入table标签的id  
     function show(o) {  
       textarea.value = o;  
     }  
     }  
     window.onload = function() {  
       addEventHandle("s",setReq);  
     }  
     function setReq(Obj) {  
       //show(Obj.text);  
       show(CurentTime());  
     }  
   
     function addEventHandle(sID,oFunction) {  
       var o = document.getElementById(sID);  
       if (!o) return;  
       (function() {  
         o.onclick = function() {  
           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)) {  
             setTimeout(function() {  
               var option = selectObj.options[selectObj.selectedIndex];  
               oFunction(option)  
             }, 60);  
           }  
         }  
       }  
       )();  
     }  
   </script>  
   
   <style type="text/css">  
     .style1  
     {  
       width: 100%;  
     }  
   </style>  
 </head>  
 <body>  
   <p>  
     <select id="s">  
       <option value="文化">文化</option>   
       <option value="科技">科技</option>   
     </select>  
     <p id="shows">  
 内容：<input type="text" id="textarea" /></p>   
   </p>  
 </body>  
 </html>  

tc471062304

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
IE的option标签单击事件无法触发的解决方法

说明：1、下面使用的代码仅适用于于IE浏览器，测试环境为IE8.2、下面的代码来自于网络，我做了下闭包的整合情景说明：对于这样的一个select标签：[html] view plain copy select id="s"> option onkeydown="onkeyDown(this)" onkeypress="o
复制链接

扫一扫