总结一下平时遇到的浏览器兼容性问题,本篇关于JS。

1.事件绑定

兼容写法:

 function add(obj,event){
if (obj.addEventListener) {
obj.addEventListener(event,fn,fase);
}else{
obj.attachEvent("on"+event,fn);
}
}

小结:addEventListener()兼容firefox、chrome、safari、opera、IE9+

   attachEvent()兼容IE7,8

2.event事件对象

兼容写法

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

小结:e兼容火狐浏览器,window.event兼容非火狐

3.获取scrollTop

兼容写法:

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

小结:document.documentElement.scrollTop兼容非chrome

document.body.scrollTop兼容chrome

4.阻止浏览器默认事件

兼容写法:

 function prevent(event){
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = false;
}
}

小结:eventPreventDefault()不兼容IE6-8

    event.returnValue = false;兼容IE

5.阻止冒泡

兼容写法:

 function stop(event){
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancleBubble = true;
}
}

小结:event.stopPropagation()不兼容IE6-8

    event.cancleBubble = true兼容IE

6.滚轮

兼容写法:

 function mouseWheel(obj,fn){
var ff = window.navigator.userAgent.indexOf('Firefox');
if (ff!=-1) {
      obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
}else{
obj.onmousewheel = wheel;//非火狐
}
}

小结:obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐

    obj.onmousewheel = wheel;//非火狐

7.获取classname

 兼容写法:

 function byClass(parent,className){
//通过className查找元素的兼容问题
//如果现代浏览器有这个写法
if (parent.getElementsByClassName) {
return parent.getElementsByClassName(className);//返回直接查找到的元素集
}else{
//IE浏览器
var arr = [];//用于存储最终查找到的元素
var els = parent.getElementsByTagName('*');//获取查找范围下的所有元素
var reg = new RegExp('\\b'+className+'\\b','g');
for (var i=0;i<els.length;i++) {
if (reg.test(els[i].className)) {//判断els.className与reg是否匹配,若匹配返回true
arr.push(els[i]);
            reg.lastIndex = 0;                 
}
}
return arr;//返回查找到的元素
}
}

补充,对于为何要加上reg.lastIndex = 0;(13行下面那一句代码),原因如下:

若不加这句代码,有连续的两个类名匹配时,只会匹配第一个,则第二个不会。究起原因就是RegExp对象的lastIndex属性:该属性存放一个整数,它声明的是上一次匹配文本之后的第一个字符的位置。若使用了‘g’全局修饰符,在执行了test方法后,lastIndex就会将匹配到的字符串的位置记录下来作为下一次匹配的起始位置。若是下一次匹配没有成功,则lastIndex置为0。

若不加'g'全局修饰符,则可以把这句代码省略掉。请点击查看demo

小结:IE浏览器不支持getElementsByClassName()所以只能自己写一个方法来获取class

后续还会补充,有错误指出还请指出。

浏览器兼容性-JS篇的更多相关文章

  1. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

  2. 浏览器兼容性小整理和一些js小问题(后面会继续更新)

    最近在啃jQuery的源码,估计会啃到很多浏览器兼容性的问题,所以整理一下 1,IE下的内存泄露. 在IE中不在DOM树中的独立节点有javascript变量引用它的时候不会被回收. 解决:手动将该j ...

  3. tab.js分享及浏览器兼容性问题汇总

    在 样式布局分享-基于frozen.js的移动OA 文章中,用了到第三方组件 tab.js(带菜单的横屏滑动插件),其兼容性很差,进行优化后,已兼容全平台(且支持IE6+). tab.js GitHu ...

  4. 从零开始的全栈工程师——html篇1.8(知识点补充与浏览器兼容性)

    知识点补充 一.浏览器的兼容问题(关于浏览器的兼容问题 有很多大佬已经解释的很清楚了 这个得自己百度去多花点时间去了解 这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题 ...

  5. 常见浏览器兼容性问题与解决方案css篇

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    ...

  6. 常见的浏览器兼容性问题与解决方案——CSS篇

    1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...

  7. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. IE浏览器兼容性模式

    最近支持公司的一个内部业务管理系统,系统是基于jQuery来实现:用了2年的MVVM框架的我转向这个完全使用jQuery框架来开发的系统,真是相当不爽(相信用过MVVM框架的跟我是相同的感受):更为憋 ...

  9. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

随机推荐

  1. SQL多表连接查询

    SQL多表连接查询 本文主要列举两张和三张表来讲述多表连接查询. 新建两张表: 表1:student  截图如下: 表2:course  截图如下: (此时这样建表只是为了演示连接SQL语句,当然实际 ...

  2. OSG计时器与时间戳

    static osg::Timer* sendMsgTimer = new osg::Timer; if (sendMsgTimer->time_m()>100)//100ms {// d ...

  3. mysql主从

    1       系统规划 1.1     mysql版本 Mysql版本 mysql-5.5.51 1.2     服务器地址 服务器地址 10.180.2.167 1.3     mysql目录 主 ...

  4. CrashMonkey4IOS App测试

    下载地址:https://github.com/vigossjjj/CrashMonkey4IOS 根据下载地址里面的说明安装一下,以下进行配置 1.进入CrashMonkey4IOS-master/ ...

  5. js 字符串操作函数

    concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定 ...

  6. Linux Memcached安装以及PHP扩展安装

    一:安装libevent 由于memcached安装时,需要使用libevent类库,所以先安装libevent 1.下载 #wget   http://www.monkey.org/~provos/ ...

  7. [转]ubuntu 下无法启动chrome

    这很不爽,google了半天也不知道答案(搜索到要重装chrome,可是我怎么都卸载不干净.....),最终解决方法如下: -------------------------------------- ...

  8. (2)WebAPI的增删改查

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  9. 基于NPOI导出和导入Excel

    概述 NPOI,顾名思义,就是POI的.NET版本.NPOI就是用.NET语言编写的一套数据导出Excel的开源项目,支持XML.xls.xlsx.ppt等格式..NET不仅实现Excel导出还可以实 ...

  10. linux系统swappiness参数在内存与交换分区间优化

    http://blog.itpub.net/29371470/viewspace-1250975        swappiness的值的大小对如何使用swap分区是有着很大的联系的.swappine ...