当前位置: 首页 > news >正文

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

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

  • tab.js GitHub Clone 地址

一直听说过IE6~IE9浏览器的兼容性问题是深坑,这次终于有所体会,就本次优化tab.js而言,如果不对IE6~IE9进行兼容,工作量可以减少一倍。

特此把遇到的各种浏览器兼容性问题进行汇总,希望对大家有所帮助。

trim(不支持IE6~IE9)

说明:去掉字符串中的空格。

// 以下为兼容写法
String.prototype.trim = function () {
    return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

requestAnimationFrame(不支持IE6~IE9)

说明:它是由浏览器专门为动画提供的API,效果和setTimeout/setInterval类似。

// 以下为兼容写法
var rAF = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) { window.setTimeout(callback, 1000 / 60); };

addEventListener (不支持IE)

说明:为元素绑定事件。

// 以下写法可以兼容大部分情况
var addHandler = function(el, type, handler, args) {
    if (el.addEventListener) {
        el.addEventListener(type, handler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, handler);
    } else {
        el['on' + type] = handler;
    }
};
var removeHandler = function(el, type, handler, args) {
    if (el.removeEventListener) {
        el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
        el.detachEvent('on' + type, handler);
    } else {
        el['on' + type] = null;
    }
};

event.target (不支持IE6~IE9)

说明:引发事件的DOM元素。

// 以下为兼容写法
target = event.target || event.srcElement;

event.preventDefault (不支持IE6~IE9)

说明:如果事件对象的cancelable属性为true,则该方法可以取消事件的默认动作,但并不取消事件的冒泡行为。(以下为兼容方法)

// 以下为兼容写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

event.stopPropagation(不支持IE6~IE9)

说明:阻止事件的冒泡行为。

// 以下为兼容写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);

event.touches.pageX(不支持IE6~IE9)

说明:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。

// 以下为兼容写法
var touches = e.touches ? e.touches[0] : e;
var pageX = (touches.pageX) ? touches.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var pageY = (touches.pageY) ? touches.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

欢迎关注微信公众号「劼哥舍」,老斯基带你飙车。

相关文章:

  • linux----进度条程序
  • Eclipse:The superclass javax.servlet.http.HttpServlet was not found on the Java Build Path
  • 运行TestCase时,提示:Element is not currently visible and so may not be interacted with
  • iOS开发之UITextField的使用详解
  • 使用生成器展平异步回调结构,JS篇
  • IPv4 地址分类
  • find命令无效处理记录
  • raft 分布式协议 -- mongodb
  • 把redis安装到ubuntu-14.04.1-server
  • [javaSE] GUI(Action事件)
  • 如何查看表和索引的统计信息
  • 持续交付:价值主张
  • pyside 移动窗口到屏幕中间
  • 二进制单位
  • I00023 鸡兔同笼解法二
  • 2017-09-12 前端日报
  • Intervention/image 图片处理扩展包的安装和使用
  • Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
  • JavaScript 一些 DOM 的知识点
  • JavaScript-Array类型
  • javascript数组去重/查找/插入/删除
  • JS+CSS实现数字滚动
  • JSONP原理
  • leetcode46 Permutation 排列组合
  • Mysql数据库的条件查询语句
  • nodejs实现webservice问题总结
  • Node项目之评分系统(二)- 数据库设计
  • SOFAMosn配置模型
  • Spring Boot MyBatis配置多种数据库
  • webgl (原生)基础入门指南【一】
  • 产品三维模型在线预览
  • 工作手记之html2canvas使用概述
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 通过git安装npm私有模块
  • 延迟脚本的方式
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 7行Python代码的人脸识别
  • ​【已解决】npm install​卡主不动的情况
  • #define用法
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (二)学习JVM —— 垃圾回收机制
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (十二)python网络爬虫(理论+实战)——实战:使用BeautfulSoup解析baidu热搜新闻数据
  • (四)【Jmeter】 JMeter的界面布局与组件概述
  • 、写入Shellcode到注册表上线
  • .NET大文件上传知识整理
  • .Net的DataSet直接与SQL2005交互
  • .Net中间语言BeforeFieldInit
  • [autojs]autojs开关按钮的简单使用
  • [BZOJ] 1001: [BeiJing2006]狼抓兔子
  • [C++]运行时,如何确保一个对象是只读的