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

最新推荐文章于 2023-03-27 11:07:32 发布

greatbody

最新推荐文章于 2023-03-27 11:07:32 发布

阅读量3.2k

点赞数 1

分类专栏： HTML JavaScript 网络

本文链接：https://blog.csdn.net/greatbody/article/details/19835241

版权

JavaScript 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

网络

4 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

说明：

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

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

情景说明：

对于这样的一个select标签：

    <select id="s">
      <option οnkeydοwn="onkeyDown(this)" οnkeypress="onkeyPress(o)" οnkeyup="onkeyUp(o)"
        value="文化">文化</option>
      <option οnkeydοwn="onkeyDown(this)" οnkeypress="onkeyPress(o)" οnkeyup="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>