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);

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

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

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

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

一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: 1 2 html...

js 在不同浏览器中一些常见的兼容性问题

对于大多数程序员而言在平时的编码过程中很少会注意到跨浏览器的问题,而当这些问题从用户那边被抛回来后才知道原来问题还是很严重的。在正式规范、事实标准以及各种实现之间存在的差异会让你觉得很烦躁。所以就需要...

TAB切换简易代码,兼容IE9以上主流浏览器

TAB切换简易代码,兼容IE9以上主流浏览器

OpenLayers中如何画扇形

项目中用到了地图展示,但是有个需求是根据参数画扇形,但是OpenLayers没有画扇形的现成函数,在某个牛人的帮助下,修改了下源代码便可以了 1,首先在源码中加入以下代码,最好是在OpenLayers...

placeholder兼容浏览器的解决方案

关于placeholder的使用,众所周知它是h5的新属性,所以IE9以下就别想用它了,不支持。 那么我们必须要低版本的浏览器,做一些降级处理的兼容,原理自然就是:提示语placeholder用其他方...

JS浏览器兼容性问题汇总

1. HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getElementBy...

常见浏览器兼容性问题汇总

  • 2015年01月07日 09:23
  • 2.34MB
  • 下载

js弹出子窗口的浏览器兼容性问题

业务功能是,点击“修改”按钮弹出编辑子窗口,修改完成后点击保存,触发父窗口的“搜索”按钮加载新的修改后的内容显示。 检测的浏览器有“IE”,"FireFox","Chrome"。Window.open...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tab.js分享及浏览器兼容性问题汇总
举报原因:
原因补充:

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