監聽滑鼠事件

劍指天涯心有夢發表於2018-07-11
事件

滑鼠事件

MouseEvent介面指使用者與指標裝置(如滑鼠)互動時發生的事件。

  • mousedown在元素上按下任意滑鼠按鍵。
  • mouseup在元素上釋放任意滑鼠按鍵。
  • mousemove指標在元素內移動時持續觸發。
  • click在元素上按下並釋放任意滑鼠按鍵。

監聽滑鼠事件

    div.onmousedown = function(x){
        console.log(x)
    }
複製程式碼

屬性

  • clientX當前座標系下滑鼠指標的X軸。
  • clientY當前座標系下滑鼠指標的Y軸。
  • button點選事件對應的按鍵序號：0為左鍵、1為中鍵、2為右鍵。

觸控事件

touchEvent是一類描述手指在觸控平面（觸控式螢幕、觸控板等）的狀態變化的事件。這類事件用於描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等。

觸控事件的型別

  • touchstart當使用者在觸控平面上放置了一個觸點時觸發。
  • touchmove當使用者在觸控平面上移動觸點時觸發。
  • touchend當一個觸點被使用者從觸控平面上移除（當使用者將一個手指離開觸控平面）時觸發。

監聽touch事件

    div.ontouchstart = function(x){
        console.log(x)
    }
複製程式碼

屬性

  • touches(多點觸控): 一 個TouchList物件，包含了所有當前接觸觸控平面的觸點的 Touch 物件，無論它們的起始於哪個 element 上，也無論它們狀態是否發生了變化
  • touchlist: 一個 TouchList 代表一個觸控平面上所有觸點的列表; 舉例來講, 如果一個使用者用三根手指接觸螢幕(或者觸控板), 與之相關的TouchList 對於每根手指都會生成一個 Touch 物件, 共計三個

如何檢測網頁執行在電腦上還是手機

in運算子 : 如果指定的屬性在指定的物件或其原型鏈中，則in運算子返回true

    var hash = {a:1,b:2,c:3}
    'a' in hash  // 返回true
    'b' in hash  // 返回true
    'd' in hash  // 返回false
複製程式碼

我們可以利用in操作符來判斷電腦還是手機

    'ontouchstart' in document.body  // 如果在手機上則返回true,在電腦上則返回false
    // 換一種方式
    document.body.ontouchstart === undefined // 如果在手機上返回true,在電腦則返回false
複製程式碼

這種檢測方式叫做特性檢測，檢測的是特性不是裝置

viewport由於移動端的手機預設會縮放，所以我們需要加上一個viewport的mata標籤使它不縮放，以一比一的比例顯示我的頁面內容。完整程式碼：<meta name="viewport" content="width=device-width, initial-scale=1.0">

相關文章