标签: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;//非火狐
后续还会补充,有错误指出还请指出。
标签:cli attach onclick clientx safari 事件绑定 listen 浏览器兼容性 bubble
原文地址:http://www.cnblogs.com/daicunya/p/6195387.html