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

原创 2016年05月31日 23:48:09

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

一直听说过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);

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

版权声明:本文为博主原创文章,欢迎转载,但需注明出处。

bootstrap之tab.js分析

我一定要征服移动端布局,深入分析bootstrap就成为了捷径之一。路虽长,我虽笨,但架不住傻逼似得坚持。加油!! tabjs是bootstrap选项卡动态,里面常见的下拉框等效果,今天来试试源码难度...
  • wujimiao
  • wujimiao
  • 2017年04月21日 02:08
  • 806

使用js实现tab页签切换效果

效果图如下:
  • Geek_ymv
  • Geek_ymv
  • 2014年10月23日 11:20
  • 44421

原生JS的简单tab切换实现

实现思路是点击上方的按钮,下方的内容随之发生改变,上方和下方用的是两个div块,是兄弟节点,所以需要让tab按钮和下方内容一一对应,例子是基予两个模块若下标相同是一个内容实现的,首先是HTML框架:/...
  • DayDreamWMM
  • DayDreamWMM
  • 2017年06月30日 21:11
  • 1972

Tab层切换01-兼容IE8和Chrome浏览器

在线测试打包下载
  • zyytaiyame
  • zyytaiyame
  • 2016年12月06日 15:18
  • 894

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

在 样式布局分享-基于frozen.js的移动OA 文章中,用了到第三方组件 tab.js(带菜单的横屏滑动插件),其兼容性很差,进行优化后,已兼容全平台(且支持IE6+)。 tab.js 百度网盘 ...
  • shi0090
  • shi0090
  • 2016年05月31日 23:48
  • 1387

javascript错误

javascript web前端
  • ltmtianming
  • ltmtianming
  • 2017年06月24日 13:33
  • 131

常见的浏览器兼容性问题总结(有自己遇到的还有网上大神总结的)

常见的浏览器兼容性问题总结 1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; pa...
  • zhuwanwanshay
  • zhuwanwanshay
  • 2016年07月11日 18:02
  • 1733

浏览器兼容性问题以及解决方法1

前端工程师在开发的过程中,遇到最头疼的莫过于是浏览器的兼容性问题,常常为了实现一个兼容各种浏览器的效果绞尽脑汁。我们平时在写前端代码的时候,在排版时也是会遇到各种兼容性问题,尤其是老板要求要兼容IE5...
  • u010297791
  • u010297791
  • 2017年02月10日 17:15
  • 581

js浏览器兼容问题总结及解决办法

javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下...
  • comeonJ
  • comeonJ
  • 2014年02月19日 10:44
  • 8837

JS在IE和FF下不兼容的问题及部分解决办法

下面列出JS在IE和FF下不兼容的方法 1、Dom操作 var wrongGet = obj.firstChild; var wrongGet = obj.lastChild; var wro...
  • u010804100
  • u010804100
  • 2015年06月03日 17:03
  • 1325
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tab.js分享及浏览器兼容性问题汇总
举报原因:
原因补充:

(最多只允许输入30个字)