ie低版本内核事件兼容问题(事件绑定,绑定事件自动执行,文档模式问题)
问题情况
搜狗等,兼容模式下,以前前端写的点击事件的代码没有,
后来一看是因为兼容模式为9,导致点击事件失效
解决办法,步骤
1,处理绑定事件兼容问题
ie低版本绑定事件只支持attactevent,所以先写个兼容的事件绑定函数
function myEve(ele,evetype,fn,uc){
var eledoc = document.getElementById(ele)
if(eledoc.addEventListener){
eledoc.addEventListener(evetype,fn,uc)
}else if(eledoc.attachEvent){
eledoc.attachEvent('on' + evetype, fn)
}
};
2,
function a(id){
var elec = document.getElementById(id)
if(elec.className.indexOf('sso') > 0){
elec.className = elec.className.slice(0,-3) + 'mmo';
}else{
elec.className = elec.className.slice(0,-3) + 'sso';
}
}
myEve('linedesign','click',a('linedesign'),false);//一开始直接使用这样的代码在载入页面时,事件便自己执行一次,而且无法继续点击效果,此处需要将事件处理函数,不传参数,就不会自己执行,改为下面一段
myEve('linedesign','click',function a(){
var elec = document.getElementById('linedesign')
if(elec.className.indexOf('sso') > 0){
elec.className = elec.className.slice(0,-3) + 'mmo';
}else{
elec.className = elec.className.slice(0,-3) + 'sso';
}
},false);//最后改成了这样,暂时能用
3,这些改完后,发现回到ie内核下还是需要手动修改一次文档模式,再次刷新,才能在ie7,8,9下绑定到点击事件
4,继续解决,
此时在header标签中加入
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
不用手动修改文档模式,即可绑定事件执行。
这些都是暂时实现了,有些原理没太明白,有知晓的网友,请不吝赐教,谢谢!
ie低版本内核事件兼容问题(事件绑定,绑定事件自动执行,文档模式问题)的更多相关文章
- 通过<meta>标签指定IE的文档模式实现CSS3兼容
今天发现之前做好的一个页面在IE中打开显示的效果不正常,本地和服务器上显示的是两种不同的样式. 经过确认文档内容和CSS都是一样的. 通过IE F12(开发人员工具)发现不正常的样式 浏览器文档模式自 ...
- 设置IE浏览器文档模式版本
浏览器版本问题是所有开发web的程序员共同的诟病,尤其是IE浏览器,笔者上次修改公司的一个项目中出现项目是在IE9没有出来之前,而现在修改时,则发现页面上出现的表格的错乱(因为表格是通过js动态生成的 ...
- 高版本api在低版本中的兼容
直接上例子,看如何避免crash. eg:根据给出路径,获取此路径所在分区的总空间大小. 文档说明:获取文件系统用量情况,在API level 9及其以上的系统,可直接调用File对象的相关方法,以下 ...
- 解决ie 低版本的 background-size 兼容问题
在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果. div{background-size: cover;filter:progid:DXImageTransform.Microsoft.A ...
- 人艰不拆之破解低版本IE不兼容mediaQuery
先放个链接 大家预览下 http://scottjehl.github.io/Respond/test/test.html 值得注意的是 将页面源代码下载到本地时,直接用IE打开是没有效果的.需要把静 ...
- ABP vNext EventBus For RabbitMQ 分布式事件总线使用注意事项_补充官网文档
[https://docs.abp.io/zh-Hans/abp/latest/Distributed-Event-Bus-RabbitMQ-Integration](ABP vNext官方文档链接) ...
- 定义文档兼容性,让IE按指定的版本解析我们的页面
作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺 ...
- 文档兼容性定义,使ie按指定的版本解析
作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺 ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
随机推荐
- luogu 2157 状压dp
f[i][j][k]分别代表1-i-1个人全部打完饭时i及其后7个人的状态为j时最后一个打饭的人为i+k的状态下所用的最小时间 当i已经打过饭时 即 j&1 那么 f [i] [j>&g ...
- 在Windows Server上安装ASP.NET时失败,提示not enough storage is available to process the command
今天在部署ASP.NET网站时出现IIS 500.21错误.环境是Windows Server 2012 +IIS8 于是查找解决方案,发现网上的信息都说是需要重装.NET framerwork4.0 ...
- webbrowser设置为相应的IE版本
注册表路径: HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATU ...
- ueditor接入秀米编辑器
秀米编辑器用来编辑微信页面很方便,功能也比较强大.秀米提供了第三方编辑器接入的功能,接入方法可以参照官网示例:http://hgs.xiumi.us/uedit/ 但是这里有几点要注意: 1. 示例中 ...
- 20165337《网络对抗技术》week1 Exp0 Kali安装
1.下载kali kali官网:https://www.kali.org 在官网中下载,并且在VMvare里打开 2.修改视图 进去之后虚拟机界面很小,需要修改视图来调整 3.网络设置 4.文件夹共享 ...
- GYM 100608G 记忆化搜索+概率 2014-2015 Winter Petrozavodsk Camp, Andrew Stankevich Contest 47 (ASC 47)
https://codeforces.com/gym/100608 题意: 两个人玩游戏,每个人有一个长为d的b进制数字,两个人轮流摇一个$[0,b-1]$的骰子,并将选出的数字填入自己的d个空位之中 ...
- shell编程练习-打印九九乘法表(附:awk编程)
小练习,仅供参考 shell编写 #!/bin/bash for i in {1..9}do for j in {1..9} do if [ $j -le $i ] ;then echo -ne &q ...
- 【python】【logging】python日志模块logging常用功能
logging模块:应用程序的灵活事件日志系统,可以打印并自定义日志内容 logging.getLogger 创建一个log对象 >>> log1=logging.getLogger ...
- LightOJ 1372 (枚举 + 树状数组)
题目 Link 输出序列中有多少个组合 {a1,a2,a3,a4,a5,a6}可以构成一个六边形. 分析 序列每个数都不相等. 所以可以设 a1<a2<a3<a4<a5< ...
- 网络流24题——数字梯形问题 luogu 4013
题目描述:这里 极其裸的一道费用流问题 首先分析第一问,由于要求一个点只能经过一次,所以我们将梯形中的每一个点拆成两个点(记为入点和出点,顾名思义,入点用来承接上一行向这一行的边,出点用来向下一行连边 ...