監聽鼠標事件

鼠標事件

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">