千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  javaScript中一些常见的兼容性问题整理

javaScript中一些常见的兼容性问题整理

时间:2018-04-02 14:40:05     来源:千锋视频教程 作者:成都

  1)滚动条:

  document.documentElement.scrollTop||document.body.scrollTop

  2) 获取样式兼容

  function getStyle(dom, styleName){

  return dom.currentStyle?

  dom.currentStyle[styleName] :getComputedStyle(dom)[styleName];}

  3) 网页可视区域兼容

  window.innerHeight || document.documentElement.clientHeight

  window.innerWidth || document.documentElement.clientWidth

  4) 事件对象兼容

  e = e || window.event;

  这里函数传入的参数e,就是事件,浏览器会实时跟踪用户的行为,如e.screenX、e.screenY、e.offsetX、e.offsetY…这种做法在FireFox、Chrome、Safari等遵循W3C规范的浏览器下是没有问题的,唯独在IE下是行不通的, IE采用了一种非标准的方式,将事件作为window对象的event属性:window.event、window.event.screenX…

  5) 阻止事件冒泡兼容

  event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

  说明:前者是方法,是标准的写法,后者是属性,赋值true表示阻止,是IE的写法。

  解决方法:判断stopPropagation是否存在,如果存在则用标准写法否则则用IE的写法,不可反过来判断。

  6)阻止默认行为兼容

  evt.preventDefault?evt.preventDefault():evt.returnValue=false;

  说明: preventDefault()和returnValue()前者标准写法,后者IE写法。

  解决方法:一般情况建议直接使用return false阻止,但和取消默认事件的含义是不同的。

  7)事件监听兼容

JavaScript兼容.jpg

  说明:标准浏览器的写法addEventListener()和IE的写法attachEvent()。

  解决方法:判断addEventListener是否存在,如果存在则用否则用IE8以下的版本(含IE8)的绑定方法attachEvent,removeEventListener()和detachEvent()也是一样的用法。

  8)事件目标对象兼容

  var src = event.target || event.srcElement;

  说明: IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。

  解决方法:使用var src = event.target || event.srcElement;来代替IE下的event.srcElement或者Firefox下的event.target,请同时注意event的兼容性问题。

  每天更新HTML5视频教程,欢迎各位同学学习。

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱