让IE的<option>支持click事件

fins

浏览: 2584494 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

IE Safari Opera HTML

首先声明一下, 这个方法最初我是从同事阿汤那里学来的. 我只是又做了一些修改,使它更完善.

众所周知,在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
踩

分享到：

突然发现自己什么技术都不会了 | 网侠大会上大家最喜欢哪个演讲者?

2008-05-31 14:57
浏览 28475
评论(4)
查看更多

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论