在使用js的过程中,往往会发现关于IE浏览器的兼容问题,当然微软现在自己也打算抛弃IE,推出了edge浏览器,对于前端来说是个好消息.

但IE的用户占比仍然不容小觑,因此这里整理下常见的几个兼容问题附上解决方案,以免不时之需.

1.非行内样式的获取

  IE浏览器:element.currentstyle+attr

  正常浏览器(chrome,FF):getComputedStyle(element,false)+attr

这两类浏览器以下都简称为IE和正常

接下来封装一个函数,方便调用(兼容所有浏览器)

function getStyle(ele,attr){
var a = "";
if(ele.currentStyle){      //IE
a = ele.currentStyle[attr];
}else{
a = getComputedStyle(ele,false)[attr]; //正常
}

2.获取事件对象

     IE  : window.event

  正常 : 给事件传参

obox.onclick=function(eve){
var e=eve||window.event;
console.log(e)
}

3.阻止事件冒泡

 事件冒泡:当触发元素的某个事件时,它会先触发自己的对应事件,然后依次向上触发所有父级的相同事件;上一父级没有相同事件,继续向上触发
需要注意的是onmouseenter和onmouseleave不支持事件冒泡
   IE    : event.cancelBubble=true
  正常 : event.stopPropagation()
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();    //正常
}else{
e.cancelBubble = true; //IE
}
}

4.事件委托

事件委托:将多个相同元素的相同事件,添加给页面上现存的共同的父元素,利用事件冒泡,配合事件源,找到真正点击的元素

  IE     : event.srcElement
  正常 : event.target
function tar(t){
var t = e.target || e.srcElement;}

5.添加事件绑定方式

事件绑定方式有两种:赋值式和监听式

(1)赋值式: (DOM 0级事件绑定)
 它比较常用,没兼容问题
  例子:obox.onclick=function(){}
(2)监听式: (DOM 2级事件绑定) 
  IE     : element.attachEvent("on"+type,cb)
  正常 : element.addEventListener(type,cb)
function addEvent(ele,type,cb){
if(ele.addEventListener){
ele.addEventListener(type,cb)   //监听式:正常
}else if(ele.attachEvent){
ele.attachEvent("on"+type,cb) //监听式:IE
}else{
ele["on"+type] = cb;      //赋值式
}
}

6.删除事件绑定方式

同样的,事件绑定方式的删除对应

(1)删除赋值式事件绑定
  例子:obox.onclick=null
(2)删除监听式事件绑定:
  IE     : element.detachEvent("on"+type,cb)
  正常 : element.removeEventListener(type,cb)
function removeEvent(ele,type,cb){
if(ele.removeEventListener){
ele.removeEventListener(type,cb)  //监听式:正常的删除
}else if(ele.detachEvent){
ele.detachEvent("on"+type,cb)   //监听式:IE的删除
}else{
ele["on"+type] = null;       //赋值式的删除
}
}

7.键盘事件的键值获取

IE     : event.which

正常 : event.keycode

function code(eve){
var e=eve||window.event; //先获取事件
var code=e.keyCode||e.which; //再获取键值
}

8.阻止默认事件

 IE     : event.returnValue = false
 正常 : event.preventDefault()
 function stopDefault(e){
if(e.preventDefault){
e.preventDefault() //正常
}else{
e.returnValue = false; //IE
}
}

9.鼠标的页面位置pageX,pageY

 function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}

10.滚轮移动距离scrollTop

function getScroll() {
if (document.documentElement.scrollTop) {
return document.documentElement.scrollTop;
} else if (document.body.scrollTop) {
return document.body.scrollTop;
}

11.严格模式的开启

;(function(){"use strict"})();

碰到新的兼容问题会继续更新,欢迎讨论

js中的兼容问题汇总的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. JS中的兼容问题总结

    今天总结总结在JS里面遇到的兼容性问题 1.获取滚动距离的兼容性问题: document.documentElement.scrollTop  ||  document.body.scrollTop ...

  3. JS中浏览器兼容问题

    body的子节点IE 火狐 显示3个  其他显示7个 float浮动中的兼容 link 操作外联的兼容

  4. js中浏览器兼容startsWith 、endsWith 函数

    在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...

  5. js中typeof的用法汇总[转载]

    http://www.jb51.net/article/43187.htm JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法, ...

  6. 记录js中的兼容问题及解决办法

    1.获取非行内样式的兼容问题: 2.获取事件对象的兼容问题: 3.事件冒泡的兼容: 4.keyCode的兼容问题: 5.处理默认事件的兼容问题: 6.事件的绑定兼容问题:

  7. js中typeof的用法汇总

  8. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  9. 分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...

随机推荐

  1. linux杂货铺

    vmware虚拟机克隆后网卡不能使用 解决方法如下 cat /etc/udev/rules.d/70-persistent-net.rules1.将eth0这行注释掉或者删除,这里记载的还是克隆系统时 ...

  2. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  3. Unity经典游戏教程之:是男人就下100层

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  4. JavaWeb——Servlet开发3

    1.使用初始化参数配置应用程序 初始化参数的方式有两种 在Web.xml文件中使用<context-param>标签声明上下文初始化参数 <context-param> < ...

  5. SonarQube系列二、分析dotnet core/C#代码

    [前言] 本系列主要讲述sonarqube的安装部署以及如何集成jenkins自动化分析.netcore项目.目录如下: SonarQube系列一.Linux安装与部署 SonarQube系列二.分析 ...

  6. 7.19 包 logging模块 hashlib模块 openpyxl模块 深浅拷贝

    包 包是什么 他是一系列文件的结合体,表现形式就是文件夹 包的本质还是模块 他通常会有__init__.py文件 我们首先回顾一下模块导入的过程 import module首次导入模块(.py文件) ...

  7. Visual Studio 中两个窗体(WinForm)之间相互传值的方法

    编写WinowsForm应用程序时,实现两个窗体之间相互传递值的方法其实很简单.以下用一个例子说明:在名为FormMain主窗体运行过程中利用名为FormInfo窗体,获取用户输入信息,并将这些信息返 ...

  8. 防抖(debounce)和节流(throttle)

    场景说明:一般我们在前端页面中会给元素绑定click.scroll.onmousemove.resize等事件,这些事件的执行函数如果是去发请求获取数据的话,我们无意识的连续点击或者连续滚动会给服务器 ...

  9. 一个有趣的 5 X 5 方阵一笔画问题

      这个问题是在我上小学时同学告诉我的,当时觉得好玩,就随便瞎画这玩儿,不过从小学到大学,没有一次画成功过.这个问题起初同学告诉我的时候,图不是这样画的,我只是为了好表达,将问题抽象成网格了,原问题是 ...

  10. 如何处理scrum中未完成的用户故事?

    你听过柏林新建机场的故事吗?机场原定2006年开工,2007年启用,但由于机场建设过程中到处出现施工和安全问题,补东墙漏西墙,导致工期一拖再拖,预算一涨再涨,以至于2019年了还没开张,预计开业时间已 ...