`

让IE的<option>支持click事件

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

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


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

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


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    <html>  
    <head>  
     <title>select-option onclick </title>  
   <script type="text/javascript" >  
    
   function simOptionClick4IE(){  
       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 ) ) {  
               
               // 记录原先的选中项  
              var oldIdx = selectObj.selectedIndex;  
 
            setTimeout(function(){  
                  var option=selectObj.options[selectObj.selectedIndex];  
                // 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex  
               // 来判断用户是不是点击了同一个选项,进而做不同的处理.  
                  showOptionValue(option)  
   
             }, 60);  
      }  
 }  
  
   function showOptionValue(opt,msg){  
      var now=new Date();  
       var dt= (1900+now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate()+  
              ' '+now.getHours()+':'+now.getHours()+':'+now.getSeconds()+'.'+now.getMilliseconds();  
     var resultZone=document.getElementById('reslut');  
      resultZone.style.margin="10px";  
      resultZone.innerHTML=dt +" 时,点击了: " + (opt.text + ' = '+opt.value);  
 }  
   
 </script>  
 </head>  
   
 <body>  
     
     <select  onclick="simOptionClick4IE()" >   
       <!-- 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 -->  
      <option value="1" onclick="showOptionValue( this )" >aaaaa</option>  
    <option value="2" onclick="showOptionValue( this )" >bbbbb</option>  
       <option value="3" onclick="showOptionValue( this )" >ccccc</option>  
    </select>  
   
  <div id="reslut" ></div>  
   </body>  
  </html>
分享到：
| 离开页面时候的警告
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ie8模式下click无反应点击option无反应的解决方法

    总结来说，解决IE8中点击`&lt;option&gt;`无反应的问题，关键在于理解IE8对`&lt;option&gt;`的`click`事件不支持，并将事件监听器绑定到`&lt;select&gt;`元素上。通过这种方式，即使在IE8这种较旧的浏览器中，也能确保功能的正常运行。...

    javascript各浏览器中option元素的表现差异

    - Internet Explorer (IE) 6、7、8 和 9 不支持直接在`&lt;option&gt;`元素上绑定事件监听器，例如`click`或`mouseover`。这意味着在这些版本的IE中，你不能直接通过`&lt;option&gt;`元素的事件处理器来执行某些操作。 - 相反...

    IE6中select标签的option不能disabled的解决方案

    在早期的Internet Explorer 6（简称IE6）浏览器中，存在一个众所周知的兼容性问题：`&lt;select&gt;`标签内的`&lt;option&gt;`元素无法正确地应用`disabled`属性。这个问题使得开发者无法在IE6中实现禁用某些选项的功能，这对于...

    jQuery完全实例.rar

    &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

    javascript option onclick事件ie解决方案 兼容ie,firefox

    总之，解决IE浏览器对select-option onclick事件不支持的问题，需要通过一些特殊的手段来模拟这种行为。无论是通过onchange事件还是将option包裹在a标签中，都能在一定程度上解决不同浏览器之间的兼容性问题。开发...

    弹出框的现实和隐藏

    在实际开发过程中，可能会遇到一些特殊情况，例如在某些浏览器中（如IE），`&lt;select&gt;`元素的高度不能自动适应内容高度的问题。为了解决这个问题，我们可以采取以下策略： 1. **动态调整高度**：通过监听`&lt;select&gt;`...

    HTML复选框和单选框 checkbox和radio事件介绍

    &lt;input type="radio" name="myRadio" value="option1" checked&gt; 男性 &lt;input type="radio" name="myRadio" value="option2"&gt; 女性 ``` 在上述代码中，`name`属性用于区分同一组的单选按钮，确保用户只能选择其中一...

    基于jquery实现的多选下拉框

    &lt;option value="option1"&gt;选项1&lt;/option&gt; &lt;option value="option2"&gt;选项2&lt;/option&gt; ... &lt;/select&gt; &lt;button id="toggleDropdown"&gt;显示/隐藏选项&lt;/button&gt; ``` 3. **jQuery代码**：接下来，编写jQuery脚本来...

    js使用小技巧

    ENTER键可以让光标移到下一个输入框 &lt;input onkeydown="if(event.keyCode==13)event.keyCode=9"&gt; 文本框的默认值 &lt;input type=text value="123" onfocus="alert(this.defaultValue)"&gt; title换行 obj.title = ...

    js下拉列表效果

    由于IE8不支持`&lt;datalist&gt;`标签或`&lt;optgroup&gt;`标签，开发者可能需要创建自定义的下拉菜单结构，例如使用`&lt;ul&gt;`和`&lt;li&gt;`来模拟下拉选项，通过JavaScript控制显示和隐藏，实现下拉效果。 4. **事件处理** 当用户...

    javascript下拉框选项单击事件的例子分享

    鉴于此，文章建议我们不应当直接在`&lt;option&gt;`元素上绑定`click`事件，而是应该使用更通用的`change`事件来替代，因为`change`事件在所有主流浏览器上均有良好的支持。使用`onchange`事件的方法如下： ```javascript...

    javascript 下拉菜单（各种各样的）

    1. HTML结构：下拉菜单的基础结构通常由`&lt;select&gt;`标签构建，其中包含一系列`&lt;option&gt;`标签来定义菜单项。然而，为了实现更复杂的交互和自定义样式，开发者通常会使用无序列表`&lt;ul&gt;`和列表项`&lt;li&gt;`来创建自定义下拉...

    javascript经典特效---控制选择框个数.rar

    这可能包括增删`&lt;option&gt;`元素，改变`&lt;select&gt;`的`size`属性（决定可视选项的数量），或者禁用/启用某些选项。这些操作都可以通过创建新的DOM节点、删除已有节点，或者修改节点属性来完成。 4. 验证与反馈：为了...

    基于Jquery模拟Select,解决IE显示问题

    &lt;li data-value="option1"&gt;Option 1&lt;/li&gt; &lt;li data-value="option2"&gt;Option 2&lt;/li&gt; &lt;!-- ... --&gt; &lt;/ul&gt; &lt;/div&gt; ``` 接下来，我们需要编写Jquery代码来处理这个自定义Select的行为。主要包括以下功能： 1. **...

    JSchengshidanxuanduoxuan.zip

    每个城市作为一个选项，可以通过`&lt;option&gt;`或`&lt;label&gt;`包裹`&lt;input&gt;`元素来实现。 2. **CSS样式**：为了使界面美观易用，通常会使用CSS（Cascading Style Sheets）来定制这些元素的外观，如字体、颜色、布局等。这...

    60个实用的jQuery代码片段.pdf

    17. **选择option元素**：选取`&lt;select&gt;`中的`&lt;option&gt;`元素，如`$("select option:selected")`。 18. **隐藏特定值元素**：根据元素的值进行隐藏，如`$("[value='myValue']").hide()`。 19. **滚动到特定区域**：...

    AngularJS实现动态添加Option的方法

    &lt;option ng-repeat="option in optionContainer" ng-bind="option.content"&gt;&lt;/option&gt; &lt;/select&gt; &lt;/body&gt; &lt;/html&gt; ``` 为了确保Option的唯一性，我们还可以添加一个`confirm`方法来检查新输入的内容是否已存在于...

    用jQuery实现的模拟下拉框代码

    原有的下拉框由`&lt;select&gt;`和`&lt;option&gt;`组成，而模拟的下拉框则包含以下几个部分： - 一个隐藏的`&lt;input&gt;`用于存储选中的值（value属性） - 另一个隐藏的`&lt;input&gt;`用于存储选中的文本（文本内容） - 一个作为显示...

Magicbox
Global site tag (gtag.js) - Google Analytics