码迷,mamicode.com
首页 > Web开发 > 详细

浏览器兼容性-JS篇

时间:2016-12-18 20:45:26      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:cli   attach   onclick   clientx   safari   事件绑定   listen   浏览器兼容性   bubble   

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

1.事件绑定

兼容写法:

1 function add(obj,event){
2     if (obj.addEventListener) {
3         obj.addEventListener(event,fn,fase);
4     }else{
5         obj.attachEvent("on"+event,fn);
6     }
7 }

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

   attachEvent()兼容IE7,8

2.event事件对象

兼容写法

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

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

3.获取scrollTop

兼容写法:

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

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

        document.body.scrollTop兼容chrome

4.阻止浏览器默认事件

兼容写法:

1 function prevent(event){
2     if (event.preventDefault) {
3         event.preventDefault();
4     }else{
5         event.returnValue = false;
6     }
7 }

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

    event.returnValue = false;兼容IE

5.阻止冒泡

兼容写法:

1 function stop(event){
2     if (event.stopPropagation) {
3         event.stopPropagation();
4     }else{
5         event.cancleBubble = true;
6     }
7 }

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

    event.cancleBubble = true兼容IE

6.滚轮

兼容写法:

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

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

    obj.onmousewheel = wheel;//非火狐

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

浏览器兼容性-JS篇

标签:cli   attach   onclick   clientx   safari   事件绑定   listen   浏览器兼容性   bubble   

原文地址:http://www.cnblogs.com/daicunya/p/6195387.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!