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

来源：互联网发布：lamp linux版本编辑：程序博客网时间：2024/06/05 20:49

说明：

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

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

情景说明：

对于这样的一个select标签：

    <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：写的很烂）：

    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的内核】

<!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>

0 0