让IE的<option>支持click事件

最新推荐文章于 2022-05-26 15:59:24 发布
最新推荐文章于 2022-05-26 15:59:24 发布
阅读量234 收藏
点赞数
分类专栏： 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>
fins
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python命令行创建工具包——Click(2)
青阳的博客
10-31 428
Click包（2） 文章目录Click包（2）提示用户输入[¶](https://click.palletsprojects.com/en/7.x/prompts/#user-input-prompts)选项提示输入提示确认提示文档脚本帮助文本记录参数防止包装截断帮助文本元变量命令快捷帮助帮助参数自定义复杂的应用程序基本概念上下文调用约定构建一个Git克隆根命令第一个子命令交错命令保障对象的创建高级模式命令别名参数修改令牌规范化调用其他命令回调评估顺序转发未知选项全球背景下的访问测试Click应用程序基本测
option设置onclick无效
qq_28770727的博客
10-24 1720
option设置onclick无效 今天写一个小案例：获取select选择的值，发现设置onclick 不起作用 具体看下代码： <script> window.onload = function() { //获取select let select = document.getElementsByTagName("select")[0]; //获取子节点 let options = select[0].children; for (let i
谷歌浏览器不兼容select的option里onclick事件的解决方案
08-26 7228
代码里在option 里加了onclick事件属性，平时多在firefox浏览器下开发，测试时发现以谷歌为内核的浏览器onclick事件无作用，查了下资料，在select里面用onchange就好了，如下：<select onchange="return selected(this.options[this.selectedIndex].value)"></select>
select中option加事件问题
huojiahui22的博客
07-22 7867
百度了下，貌似“众所周知,在IE里, select的option是不支持onclick事件的”　o(╯□╰)o　 但是，我不知道 >3< 一个列表。要对其中一项进行即点即改，恰巧，这项是下拉菜单。 这就意味着，要给下拉菜单加个事件了。 一开始我给option加了事件，用火狐调试的，貌似一切正常，没有毛病。 偶尔一次，我用谷歌打开，用其他浏览器打开，都不能使用。 开始一步一步
让IE的option支持双击/单击事件
weixin_34128839的博客
08-03 161
众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的. (safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.) 虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的opti...
ie8模式下click无反应点击option无反应的解决方法
09-04
总结来说，解决IE8中点击`<option>`无反应的问题，关键在于理解IE8对`<option>`的`click`事件不支持，并将事件监听器绑定到`<select>`元素上。通过这种方式，即使在IE8这种较旧的浏览器中，也能确保功能的正常运行。...
javascript option onclick事件ie解决方案 兼容ie,firefox
10-29
在 IE 浏览器中，Option onclick 事件无法正确触发的原因是因为 IE 不支持 Option 元素的 onclick 事件。相比之下，Firefox 浏览器可以正确地触发 Option onclick 事件。 解决方案 要解决这个问题，我们可以使用 ...
HTML复选框和单选框 checkbox和radio事件介绍
10-27
<input type="radio" name="myRadio" value="option1" checked> 男性 <input type="radio" name="myRadio" value="option2"> 女性 ``` 在上述代码中，`name`属性用于区分同一组的单选按钮，确保用户只能选择其中一...
javascript各浏览器中option元素的表现差异
12-04
- Internet Explorer (IE) 6、7、8 和 9 不支持直接在`<option>`元素上绑定事件监听器，例如`click`或`mouseover`。这意味着在这些版本的IE中，你不能直接通过`<option>`元素的事件处理器来执行某些操作。 - 相反...
js 多选框被选中触发的事件_JS实现select选中option触发事件操作示例
weixin_39794385的博客
12-19 813
本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下：我们在用到下拉列表框select时，需要对选中的选项触发事件，其实本身没有触发事件方法，我们只有在select里的onchange方法里触发。想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢...
SELECT点击相应option响应点击事件
10-18
点击option自动弹出value的值，作为初学者使用。
IE 浏览器 button的 click 不生效(兼容问题) 原因分析
m0_62099781的博客
05-26 1130
button绑定了事件，传递了$event ,并在JS中使用，在谷歌、火狐都可正常使用，但是当处于IE浏览器时，button绑定的事件就不会被触发
前端绑定click事件在IE浏览器点击触发无作用解决方法
tomorrownan的博客
12-08 1万+
写的前端页面在火狐、谷歌、360浏览器上功能均正常，在IE浏览器按钮点击不起作用切换失败。我的本机IE是IE10，在IE9上测试同样不起作用。 在网上搜的攻略，说是jquary版本与IE浏览器的兼容问题，并说jquary1.x版本可以兼容所有版本，然而我尝试了使用1.x和2.x版本的jq框架，并不起作用，click事件仍然无法触发。 偶然间我点击了允许浏览器阻止的内容运行，click点击事件竟然可...
IE 动态绑定click事件
lein_wang的专栏
11-04 2241
//必须先清除原有的事件 $(dom).attr("onclick", ""); //再重新绑定新的事件 $(dom).bind("click", function() { //do something; });IE/
option click事件
weixin_30902251的博客
08-16 478
$("#m-s-type").on("change",function(){ var id = $(this).find("option:selected").attr("data-id"); console.log(id) if(id==1){ } }) ...
给select下拉列表的option添加onclick（点击）事件(兼容IE8, Chrome)
Kinber_XD的博客
05-16 1万+
1.参考资料:☞☞点我跳转 问题描述: select的onchange并不能满足所有的业务需求!!! 比如当我们第一次点击下拉列表的某一个option的时候会触发onchange, 但是当我们点击第二次再次点击相同的option的时候, (注意: 此时浏览器认为第一次选中的option与第二次选中的option一致, 不会再次触发onchange) 但是我们需要的是每次点击或选择opti...
JQ给select的option添加点击事件
热门推荐
yeah_nn的博客
06-06 3万+
我们在用到下拉列表框select时，需要对选中的&lt;option&gt;选项触发事件，其实&lt;option&gt;本身没有触发事件方法，我们只有在select里的onchange方法里触发。想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢就触发了！！！解决方案：  给selec...
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body> <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> </tr> </tbody> </table> <button onclick="addRow('myTable')">增加</button> </body> </html>将这段代码用bootstrap进行优化
最新发布
04-23
cell.innerHTML = '<select class="form-control"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值