JS相容問題總結

来源:https://www.cnblogs.com/wpdh/archive/2022/08/04/16550145.html
-Advertisement-
Play Games

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

相容:
       方式1if (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);
    }

 


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

-Advertisement-
Play Games
更多相關文章
  • 最近做了一個校園拍賣小程式,想在裡面添加一個類似校園圈功能,現在來一步一步實現。 一、設計所需要的表 1、文章表 文章表很簡單,就類似朋友圈,一個文字內容,一個圖片數組 2、評論表 3、點贊表 二、發佈動態 1、文本區 游標有點問題,回車換行時游標和文字被埋在下麵了 解決,給textarea設置一個 ...
  • 1 語聊房應用場景說明 七夕禮物準備好了嗎?程式猿七夕禮物標配,給女友搭建專屬語聊房,既浪漫又硬核! 語聊房在社交場景中使用比較廣泛,社交APP中的語聊房場景的實現,主要由業務系統和移動/Web 客戶端組成。其中業務系統需要實現語聊房的房間管理、麥位管理、音頻流和麥位關聯關係管理等功能,客戶端需要實 ...
  • 一.頁面導航 1.聲明式導航 通過navigator來跳轉 1.1 導航到tabBar頁面 比如跳轉到tabBar頁面就需要navigator來跳轉,要用到他的url和open-type屬性 1.2 導航到非tabBar頁面 非tabBar頁面只是沒有配置為tabBar的頁面,註意還是頁面 配置其他 ...
  • 七夕來咯!又到了給重要的人送驚喜的時刻。 今年,除了將心意融入花和禮物,作為程式員,用自己的代碼本事手搓一個技術感十足“七夕限定”驚喜,我覺得,這是不亞於車馬慢時代手寫信的古典主義浪漫。 那麼,應該怎樣創作出具有自我身份屬性的浪漫七夕驚喜呢? 玩法很多,今天給大家介紹一個不出錯的技術控浪漫實操方式— ...
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 變數提升題目: (function(){ a=5 console.log(window.a) var a=10 console.log(a) })() 答案如下(還請先思考哦) //編譯後 (function(){ var a; a=5; console.log(window.a) //undefi ...
  • BOM BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) BOM的結構 window 概述: window是頂層對象 屬於 ...
  • 1 ref 接受一個內部值並返回一個響應式且可變的 ref 對象。ref 對象僅有一個 .value property,指向該內部值。 案例 <template> <div> <button @click="changeMsg">change</button> <div>{{ message }}< ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...