IE下不支持option的onclick事件
<select>
<option onclick="test('www.hao123.com')"value="www.hao123.com">hao123</option>
<option on click="test('www.baidu.com')" value="www.baidu.com">baidu</option>
<option on click="test('www.google.com')" value="www.google.com">google</option>
</select> <script type="text/javas cript">
function test(s){
window.open(s);
}
</script>
这些代码在Firefox下能正常运行;在IE下不能运行,且没有报错.
最后发现了问题所在:在IE里,select的option是不支持onclick事件的,而在Firefox和 OPERA 里, option 是支持onclick事件的。
那么应该怎么实现原设定的功能?用Select元素的onchange事件。这时主要是考虑如何获得被选中的选项所代表的链接。
修改后代码如下:
<select id="friendLink" on change="test()>
<option value="www.hao123.com">hao123</option>
<option value="www.baidu.com">baidu</option>
<option value="www.google.com">google</option>
</select> <script type="text/javas cript">
function test(){
var targetSlect=document.getElementById("friendLink");
var targetHref=targetSlect.options[targetSlect.selectedIndex].value;
window.open(targetHref);
}
</script>
虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项 而你再次点击第一项时, select是不会被触发的. 下面的代码演示了一种间接实现 option onclick的方法 注意:此方案只适用于下拉方式的单选select.
IE下不支持option的onclick事件的更多相关文章
- select中option的onclick事件失效
html: <select id="pageSelect"> <option value="1" selected onclick=" ...
- uGUI使用代码动态添加Button.OnClick()事件(Unity3D开发之十二)
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/42705885 ...
- 谈谈如何给下拉框option添加点击事件?
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
- 解决IE6下a标签的onclick事件里的超链接不跳转问题
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- JS里的onclick事件
可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...
- onclick 事件
onclick 事件 Event 对象 定义和用法 onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后 ...
- jq动态添加onclick事件在谷歌中不起作用
$("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...
- 为select的option绑定键盘事件
1. 目的 可以使用快捷键1.2.3.4等自动选中select框对应的option 2. 代码 <select id="selectItem" class="for ...
随机推荐
- LINUX C++ 技术博客
http://blog.csdn.net/pcliuguangtao/article/category/676422
- oracle SELECT INTO 和 INSERT INTO SELECT 两种表复制语句详解
我们经常会遇到需要表复制的情况,如将一个table1的数据的部分字段复制到table2中,或者将整个table1复制到table2中,这时候我们就要使用SELECT INTO 和 INSERT INT ...
- laravel controller:make
php artisan make:controller DIR/XXXController
- 利用 Composer 完善自己的 PHP 框架(一)——视图装载
本教程示例代码见 https://github.com/johnlui/My-First-Framework-based-on-Composer 回顾 经过了上一个 系列教程 <利用 Comp ...
- 关于struts2的modelDriven
今天做毕业设计,前台往后台赋值,习惯性的用了modelDriven.但是刚写完就奇怪它的机理是怎样的,它怎么知道我前台传的参是哪个Model的属性(之前用servlet都是手动),于是手贱的ctrl点 ...
- LXNetwork – 基于AF3.0封装的iOS网络请求库
本框架实现思路与YTKNetwork和RTNetworking类似,相当于一个简单版,把每一个网络请求封装成对象.使用LXNetwork,你的每一个请求都需要继承LXBaseRequest类,通过覆盖 ...
- SSO 登录功能的实现
一.引言 自己早晚都会碰到的问题. 当需要到分离多站点多应用的时候,都是希望用户只要在一个站点登录,其它所有的应用站点都是已登录的状态. 查了下新浪与淘宝的登录的资料,自己实现了一个并做下记录. 二. ...
- django–url
当我们创建了一个项目时,系统为我们创建了一份urlconf, 它可能是这样的: urlpatterns = [ url(r'^admin/', admin.site.urls), ] r'^admin ...
- WampServer下修改和重置MySQL密码(转)
转自:www.2cto.com/database/201504/387589.html WampServer安装后密码是空的, 修改一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用W ...
- [设计模式]<<设计模式之禅>>抽象工厂模式
1 女娲的失误 上一篇讲了女娲造人的故事.人是造出来了,世界也热闹了,可是低头一看,都是清一色的类型,缺少关爱.仇恨.喜怒哀乐等情绪,人类的生命太平淡了,女娲一想,猛然一拍 脑袋,忘记给人类定义性别了 ...