`

让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>
8
顶
3
踩
分享到：
| 网侠大会上大家最喜欢哪个演讲者?
评论
4 楼 暂不存在 2015-02-07  
哥们，就差谷歌的内核是好是坏了。。。。
3 楼 qinweittt 2013-11-01  
为什么要用setTimeout呢？
2 楼 fins 2008-06-01  
你说的那是 getFullYear

引用

getYear 方法
请参阅
Date 对象的方法 | getFullYear 方法 | getUTCFullYear 方法 | setFullYear 方法 | setUTCFullYear 方法 | setYear 方法

应用于： Date 对象
要求
版本 1
返回 Date 对象中的年份值。

dateObj.getYear()
必选项 dateObj 参数为 Date 对象。

说明
这个方法已经过时，之所以提供这个方法，是为了保持向后的兼容性。请改用 getFullYear 方法。

对于1900-1999这段时间而言，返回的年份值是一个两位数字的整数，它代表了所保存的年份与 1900 年之间的差距。而对于其它的年份，返回值是一个四位的整数。例如，1996 年的返回值是 96，而 1825 和 2025 年的返回值则相应地为 1825 和 2025。

注意   对于 JScript 1.0 版，getYear 返回的值始终为 Date 对象中的年份与 1900 年之间的差距。例如，1899 年的返回值是 -1， 而 2000 年的返回值是 100。

1 楼 liuying841024 2008-05-31  
js 里的getyear()不需要加1900
发表评论

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

相关推荐

    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;`元素的事件处理器来执行某些操作。 - 相反...

    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; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

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

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

    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