JS相容問題總結

-Advertisement-

JS相容問題總結 “標準瀏覽器”和“低版本瀏覽器（IE）”相容寫法一、瀏覽器捲去的高度和寬度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop var scrollLeft = documen ...

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);
    }

您的分享是我們最大的動力!