让IE的<option>支持click事件

最新推荐文章于 2019-05-16 16:01:39 发布

fins

最新推荐文章于 2019-05-16 16:01:39 发布

阅读量275

点赞数

分类专栏： web前端文章标签： IE Safari Opera HTML

web前端专栏收录该内容

85 篇文章

订阅专栏

本文介绍了一种在Internet Explorer浏览器下通过JavaScript实现模拟option onclick事件的方法，适用于下拉方式的单选select。该方法通过记录并延迟触发自定义函数，解决了IE浏览器不支持option onclick事件的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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