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

twohappy 发布于2019-08-19 18:26 / 3247人阅读

摘要：地址一直听说过浏览器的兼容性问题是深坑，这次终于有所体会，就本次优化而言，如果不对进行兼容，工作量可以减少一倍。特此把遇到的各种浏览器兼容性问题进行汇总，希望对大家有所帮助。以下为兼容方法以下为兼容写法不支持说明阻止事件的冒泡行为。

在样式布局分享-基于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(/^ss*/, "").replace(/ss*$/, "");
}

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

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

专线服务 idc机房托管问题汇总号码隐私保护常见问题汇总兼容性问题 webrtc兼容性问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79601.html

JavaScript文章

摘要：我对知乎前端相关问题的十问十答张鑫旭张鑫旭大神对知乎上经典的个前端问题的回答。作者对如何避免常见的错误，难以发现的问题，以及性能问题和不好的实践给出了相应的建议。但并不是本身有问题，被标准定义的是极好的。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老...

mumumu 2019-08-22 13:50 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
关于css兼容性问题及一些常见问题汇总

摘要：解决办法添加复制内容到剪贴板一行右侧第一个元素有双边距一行左侧第一个元素有双边距在，下，自身没浮动，但是的内容有浮动，下边就会产生一个间隙解决办法给加浮动给加注意当下最小高度问题，和的间隙问题共存的时候，给加浮动才能解决。目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。 1.圆盘时钟有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下...

seanlook 2019-04-23 11:43 评论0 收藏0