草庐IT

JS兼容问题总结

Awiki Code 2023-03-28 原文

JS兼容问题总结

“标准浏览器”和“低版本浏览器（IE）”兼容写法

一、浏览器卷去的高度和宽度

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

  • 两个都是获取页面向上滚动的距离

  • 区别：

    • Chrome 和 FireFox、IE 浏览器

      • 没有 DOCTYPE 声明的时候，用 document.body.scrollTop

      • 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop

    • Safari

      • 两个都不用，使用一个单独的方法 window.pageYOffset

二、处理事件对象兼容

    function (e) {
	   var e = e || window.event
    }

e--标准浏览器；

window.event--低版本浏览器（IE）；

 

三、 按键兼容

事件对象里面有一个叫做 keyCode 的属性，
表示你按下的是哪一个按键，但是是以编码的形式给你
特性： FireFox < 20的版本不支持
火狐低版本使用 which 属性

    //兼容：
    var code = e.keyCode || e.which

 

四、阻止事件传播的兼容（冒泡和捕获）

 标准浏览器： e.stopPropagation()
IE低版本： e.cancelBubble = true

兼容：
       方式1：if (e.stopPropagation) { } else { }
       方式2： try {} catch (e) { } （尝试第一个大括号里面的代码，如果报错，执行后面的）

 

五、处理事件目标兼容

目标准确触发事件的那个元素，在事件对象里面有一个属性叫做 target 表示本次事件触发的时候，准确触发的元素我们叫做事件目标
IE低版本不支持
IE低版本使用 srcElement

处理兼容
var target = e.target || e.srcElement

target

  • target 这个属性是事件对象里面的属性，表示你点击的目标

  • 当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

  • 这个 target 也不兼容，在 IE 下要使用 srcElement

    <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <script>
      	var oUl = docuemnt.querySelector('ul')
    
        oUl.addEventListener('click', function (e) {
          e = e || window.event
          var target = e.target || e.srcElement
          console.log(target)
        })
      </script>
    </body>

    • 上面的代码，当你点击 ul 的时候，target 就是 ul

    • 当你点击在 li 上面的时候，target 就是 li

 

 

六、获取元素非行间样式兼容

getComputedStyle（非IE使用）

  • 语法：window.getComputedStyle(元素, null).要获取的属性

  • 第二个参数不写的时候默认是null，表示是一个正常元素

  • 第二个参数可以写'after' || 'before'，表示获取伪元素的样式

<style>
      div {
        width: 100px;
      }
    </style>
    <body>
      <div style="height: 100px;">
        <p>我是一个 p 标签</p>
      </div>

      <script>
        var oDiv = document.querySelector('div')
	    	console.log(window.getComputedStyle(oDiv).width) // 100px
        console.log(window.getComputedStyle(oDiv).height) // 100px
      </script>
    </body>

    //这个方法获取行间样式和非行间样式都可以

 

currentStyle（IE使用）

语法：元素.currentStyle.要获取的属性

 

    <style>
      div {
        width: 100px;
      }
    </style>
    <body>
      <div style="height: 100px;">
        <p>我是一个 p 标签</p>
      </div>

      <script>
        var oDiv = document.querySelector('div')
    		console.log(oDiv.currentStyle.width) // 100px
        console.log(oDiv.currentStyle.height) // 100px
      </script>
    </body>

 

 

七、 阻止浏览器默认行为的兼容

标准浏览器： e.preventDefault()

IE 低版本： e.returnValue = false

    //兼容：
       方式1： if (e.preventDefault) {} else {}
       方式2： try {} catch (err) {}
       方式3： return false （大部分情况下是可以用的）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <a href="https://www.baidu.com">阻止浏览器默认行为</a>

  <script>
    
    // 获取元素
    var a = document.getElementsByTagName('a')[0]

    a.onclick = function (e) {
      e = e || window.event
      console.log('我被点击了')

      // 阻止默认事件
      // e.preventDefault()

      // IE 低版本
      // e.returnValue = false

      return false
    }
	
	//禁止框选文本
    window.onselectstart = function () {
      return false
    }

    // 右键单击事件
    window.oncontextmenu = function () {
      console.log('右键单击了')
      return false
    }

  </script>
</body>
</html>

 

八、事件监听的绑定兼容

  • addEventListener : 非 IE 7 8 下使用

  • 语法： 元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)

    oDiv.addEventListener('click', function () {
      console.log('我是第一个事件')
    }, false)

    oDiv.addEventListener('click', function () {
      console.log('我是第二个事件')
    }, false)

  • 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行

  • 先打印 我是第一个事件 再打印 我是第二个事件

 注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick；

 

  • attachEvent ：IE 7 8 下使用

  • 语法： 元素.attachEvent('事件类型'， 事件处理函数)

    oDiv.attachEvent('onclick', function () {
      console.log('我是第一个事件')
    })

    oDiv.attachEvent('onclick', function () {
      console.log('我是第二个事件')
    })

 

  • 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行

  • 先打印 我是第二个事件 再打印 我是第一个事件

注意： 事件类型的时候要写 on，点击事件就行 onclick；

 

两个方式的区别

  • 注册事件的时候事件类型参数的书写

    • addEventListener ： 不用写 on

    • attachEvent ： 要写 on

  • 参数个数

    • addEventListener ： 一般是三个常用参数

    • attachEvent ： 两个参数

  • 执行顺序

    • addEventListener ： 顺序注册，顺序执行

    • attachEvent ： 顺序注册，倒叙执行

  • 适用浏览器

    • addEventListener ： 非 IE 7 8 的浏览器

    • attachEvent ： IE 7 8 浏览器

 

 

 

 九、事件解绑

  • removeEventListener: 非 IE 7 8 下使用

  • 语法：元素.removeEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)

  • detachEvent：IE 7 8 下使用

  • 语法：元素.detachEvent('事件类型'， 事件处理函数)

    var x = document.getElementById("myDIV");
    if (x.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
        x.removeEventListener("mousemove", myFunction);
    } else if (x.detachEvent) {                   // IE 8 及更早IE版本
        x.detachEvent("onmousemove", myFunction);
    }

 

兼容问题spancontenteditableclassJavaScript

有关JS兼容问题总结的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐