全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术问答  > 详情

常见的兼容问题有哪些 ?

匿名提问者2023-04-12

常见的兼容问题有哪些 ?

推荐答案

  常见的兼容问题有哪些 ?

兼容问题有哪些

  获取标签节点:

  document.getElementsByClassName('类名')在低版本ie中不兼容。解决方法是使用其他方式获取:

  document.getElementById('id名')

  document.getElementsByTagName('标签名')

  document.getElementsByName('name属性值')

  document.querySelector('css选择器')

  document.querySelectorAll('css选择器')

  复制代码

  

  * 获取卷去的高度

  复制代码

  // 当有文档声明的时候

  document.documentElement.scrollTop

  document.documentElement.srollLeft

  // 没有文档声明的时候

  document.body.scrollTop

  document.body.scrollLeft

  复制代码

  * 解决办法使用兼容写法:

  复制代码

  // 获取

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

  var l = document.documentElement.srollLeft || document.body.scrollLeft

  // 设置

  document.documentElement.scrollTop = document.body.scrollTop = 数值

  document.documentElement.srollLeft = document.body.scrollLeft = 数值

  复制代码

  

  获取样式

  // W3C标准浏览器

  window.getComputedStyle(元素)

  // 低版本IE中

  元素.currentStyle

  复制代码

  使用函数封装的方式兼容:

  function getStyle(ele,attr){

  if(window.getComputedStyle){

  return getComputedStyle(ele)[attr]

  }else{

  return ele.currentStyle[attr]

  }

  }

  复制代码

  

  事件侦听器

  // W3C浏览器

  ele.addEventListener(事件类型,函数)

  // 低版本Ie

  ele.attachEvent('on事件类型',函数)

  复制代码

  使用函数封装的方式解决:

  function bindEvent(ele,type,handler){

  if(ele.addEventListener){

  ele.addEventListener(type,handler)

  }else if(ele.attachEvent){

  ele.attachEvent('on'+type,handler)

  }else{

  ele['on'+type] = handler

  }

  }

  复制代码

  

  事件解绑

  // W3C浏览器

  ele.removeEventListener(事件类型,函数)

  // 低版本Ie

  ele.detachEvent('on事件类型',函数)

  复制代码

  使用函数封装的方式解决:

  function unBind(ele,type,handler){

  if(ele.removeEventListener){

  ele.removeEventListener(type,handler)

  }else if(ele.detachEvent){

  ele.detachEvent('on'+type,handler)

  }else{

  ele['on'+type] = null

  }

  }

  复制代码

  

  事件对象的获取

  // W3C浏览器

  元素.on事件类型 = function(e){}

  元素.addEventListener(事件类型,fn)

  function fn(e){

  }

  // 在低版本IE中

  元素.on事件类型 = function(){ window.event }

  元素.addEventListener(事件类型,fn)

  function fn(){

  window.event

  }

  复制代码

  使用短路运算符解决:

  元素.on事件类型 = function(e){

  var e = e || window.event

  }

  元素.addEventListener(事件类型,fn)

  function fn(e){

  var e = e || window.event

  }

  复制代码

  

  阻止默认行为

  // W3C浏览器

  元素.on事件类型 = function(e){

  e.preventDefault()

  }

  // 在低版本IE中

  元素.on事件类型 = function(){ window.event.returnValue = false }

  复制代码

  通过封装函数解决;

  元素.on事件类型 = function(e){

  var e = e || window.event

  e.preventDefault?e.preventDefault():e.returnValue=false

  }

  复制代码

  

  阻止事件冒泡

  // W3C浏览器

  元素.on事件类型 = function(e){

  e.stopPropagation()

  }

  // 在低版本IE中

  元素.on事件类型 = function(){ window.event.cancelBubble = true }

  复制代码

  通过函数封装解决:

  元素.on事件类型 = function(e){

  var e = e || window.event

  e.stopPropagation?e.stopPropagation():e.cancelBubble=true

  }

  复制代码

  

  获取精准的目标元素

  // W3C浏览器

  元素.on事件类型 = function(e){

  e.target

  }

  // 在低版本IE中

  元素.on事件类型 = function(){ window.event.srcElement }

  复制代码

  通过短路运算符解决:

  元素.on事件类型 = function(e){

  var e = e || window.event

  var target = e.target || e.srcElement;

  }

  复制代码

  

  获取键盘码

  // W3C浏览器

  元素.on事件类型 = function(e){

  e.keyCode

  }

  // 在低版本火狐中

  元素.on事件类型 = function(e){

  e.which

  }

  复制代码

  通过短路运算符解决:

  元素.on事件类型 = function(e){

  var e = e || window.event

  var keycode = e.keyCode || e.which;

  }

相关问答

常见的兼容问题有哪些 ?

javase和java一样吗?有什么区别和联系?

html和h5有什么区别?如何分辨?

想进入it行业,学软件开发需要什么基础?

Vue3.0和Vue2.0的区别

开班信息 更多>>

课程名称
全部学科
咨询

HTML5大前端

Java分布式开发

Python数据分析

Linux运维+云计算

全栈软件测试

大数据+数据智能

智能物联网+嵌入式

网络安全

全链路UI/UE设计

Unity游戏开发

新媒体短视频直播电商

影视剪辑包装

游戏原画

    在线咨询 免费试学 教程领取