问题情况

搜狗等,兼容模式下,以前前端写的点击事件的代码没有,

后来一看是因为兼容模式为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低版本内核事件兼容问题(事件绑定,绑定事件自动执行,文档模式问题)的更多相关文章

  1. 通过<meta>标签指定IE的文档模式实现CSS3兼容

    今天发现之前做好的一个页面在IE中打开显示的效果不正常,本地和服务器上显示的是两种不同的样式. 经过确认文档内容和CSS都是一样的. 通过IE F12(开发人员工具)发现不正常的样式 浏览器文档模式自 ...

  2. 设置IE浏览器文档模式版本

    浏览器版本问题是所有开发web的程序员共同的诟病,尤其是IE浏览器,笔者上次修改公司的一个项目中出现项目是在IE9没有出来之前,而现在修改时,则发现页面上出现的表格的错乱(因为表格是通过js动态生成的 ...

  3. 高版本api在低版本中的兼容

    直接上例子,看如何避免crash. eg:根据给出路径,获取此路径所在分区的总空间大小. 文档说明:获取文件系统用量情况,在API level 9及其以上的系统,可直接调用File对象的相关方法,以下 ...

  4. 解决ie 低版本的 background-size 兼容问题

    在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果. div{background-size: cover;filter:progid:DXImageTransform.Microsoft.A ...

  5. 人艰不拆之破解低版本IE不兼容mediaQuery

    先放个链接 大家预览下 http://scottjehl.github.io/Respond/test/test.html 值得注意的是 将页面源代码下载到本地时,直接用IE打开是没有效果的.需要把静 ...

  6. ABP vNext EventBus For RabbitMQ 分布式事件总线使用注意事项_补充官网文档

    [https://docs.abp.io/zh-Hans/abp/latest/Distributed-Event-Bus-RabbitMQ-Integration](ABP vNext官方文档链接) ...

  7. 定义文档兼容性,让IE按指定的版本解析我们的页面

    作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺 ...

  8. 文档兼容性定义,使ie按指定的版本解析

    作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺 ...

  9. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

随机推荐

  1. O2O淘宝优惠券代码总结

    一.数据集预处理 1.数据读入 import pandas as pd import numpy as np import datetime as date import datetime as dt ...

  2. C# 01 Primitive Types and Expressions

    Class Data or Attributes state of the application Methods or Functions have behavior Namespace is a ...

  3. jqGrid整合篇

    jqgrid实现多级表头 //使用setGroupHeaders参数: $( "#datagrid" ).jqGrid( 'setGroupHeaders' , { useColS ...

  4. 自定义Maven Archetype模板

    1. 目的 自定义Maven Archetype模板目的为了把自己辛苦搭建的基础项目可以作为模板, 方便以后可以快速的创建类似项目,免去每次搭建的麻烦 2.把基础项目打包生成archetype项目 在 ...

  5. ps切图技巧

    步骤1: ps打开psd文件 步骤2: 点击移动工具,观察左上角的自动选择是否有勾选 ,如果没有最好勾选,对应的选项有图层和组,善于切换这个功能能够有效快速的找到你要的区域 步骤3: 找到要切图的元素 ...

  6. HG奋斗赛A[20190428]

    T1 很简单,判断这个字符串有多少个不同的字符,让后用k减一减 注意: 1.如果不同字符数大于k,不要输出负数 2.变量名别打错 上代码 #include <cstdio> #includ ...

  7. idea编译错误提示编译版本不对,需要注意的配置

  8. windows 安装docker报错:Error checking TLS connection: ssh command error: command : ip addr show

    今天安装docker部署的时候总是再报这个错误. 报错的原因是初始化的时候出错了. 在docker 安装目录下有一个文件,如下图所示 将它复制到你电脑用户名目录下生成.docker 的文件夹中,如下图 ...

  9. 什么时候Python的List,Tuple最后一个Item后面要加上一个逗号

    为什么看Python的代码,有时候会在数据结构的最后一项末尾加上逗号.直接来看,这个逗号很多余. 根据PEP81的解释: Trailing commas are usually optional, e ...

  10. 【转】让EntityManager的Query返回Map对象

    在JPA 2.0中我们可以使用entityManager.createNativeQuery()来执行原生的SQL语句.但当我们查询结果没有对应实体类时,需使用entityManager.create ...