移動端事件

//如果頁面使用了原生的touch事件一定要組織瀏覽器的默認行爲
$(document).on("touchstart touchmove touchend",function (e) {
e.preventDefault();
});

//touch.js庫

//touch.on(當前元素,"事件類型",函數);

touch.on(box,"tap",function (){})

//雙擊//doubletap


box.addEventListener("touchstart",function (e) {
    //獲取手指信息e.touches[0]
    //注意通過這樣touches獲取手指信息必須保證手指還在屏幕上
    //但是touchend時候手指已經離開屏幕了,如果此時還想獲取手指信息必須使用e.changedTouches[0]獲取
    let point=e.touches[0];
    //記錄當前手指的XY軸偏移
    this.startX=point.clientX;
    this.startY=point.clientY;
    //this.isMove=false;
});
box.addEventListener("touchmove",function (e){}
box.addEventListener("touchend",function (e){}

移動端事件:
click 單擊,load,scroll,blur,focus,change,input(代替keyup和keydown)
touch事件(處理單手指操作)gesture(處理多手指操作)
touch:touchstart touchmove touchend touchcancel
gesture:gesturestart  gesturechange gestureend
1.click :在移動端click屬於單擊事件,不是點擊事件,因爲在移動端經常區分單擊和雙擊進行不同的操作,在一定的時長內會判斷是否點擊第二次,只有確定沒有單擊,纔會執行的是單擊綁定的函數,所以說單擊click會有一定的延遲一般是300ms

2,單擊,雙擊,長按,滑動(上下左右),
單擊和雙擊(300ms)
點擊和長按(750ms)
點擊和滑動(xy軸的偏移量是大於30px是滑動)
左右和上下滑動的區別 x軸的變化大於Y軸變化是左右滑動
左右:偏移的差值>0 右滑反之左滑

3.移動端的事件庫
FastClick.js(解決了click 的延遲問題)
touch.js:百度雲自己出的一款事件庫

zepto.js封裝了很多事件,小型JQ



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章