移動端事件（一） 移動端事件和物件

在我們開始用原聲js寫移動端輪播前，我們先了解一些移動端的基礎。

touch事件、touchevents物件、滑屏的思想與實現

移動端touch事件

let box = document.queryselector("#box");

/*touchstart --> mousedown 
手指觸碰元素
touchmove --> mousemove
手指觸碰元素之後,在螢幕中移動
touchend --> mouseup
手指觸碰元素之後,從螢幕上抬起
*/box.addeventlistener("touchstart",()=>);
box.addeventlistener("touchmove",()=>);
box.addeventlistener("touchend",()=>);

);

box.addeventlistener("touchend",()=>);
}

let box = document.queryselector("#box");

"touchend",()=>,300);
//});
box.addeventlistener("touchend",(e)=>,300);
e.preventdefault();
});

document.addeventlistener("touchmove",(e)=>,);

"touchstart",()=>)

阻止 touchstart 預設事件帶來的危害：

1. 所有的 mouse 事件,全部都會失效(包括a標籤的href)

2. 滾動條不能拖動

3. 沒有辦法獲得焦點和失去焦點

4. 多指不能縮放頁面

5. 長按選中會被阻止，系統選單也會被阻止

阻止 touchmove 預設事件帶來的危害:

1. 滾動條不能拖動

2. 多指不能縮放頁面

touchevent 物件詳解

滑屏摁下時，記錄手指座標和元素座標

移動後，獲取手指新座標

計算手指移動距離 = 用移動後的手指 - 摁下時手指座標

移動後的元素位置 = 手指移動距離 + 摁下時元素的座標

因為俺也是在學，如果有遇到什麼bug，歡迎和俺一塊**。

移動端事件

移動端事件 onclick 移動端也可以使用onclick事件，但是查閱資料上說會有300ms的延遲，究竟是不是有待考究。ontouchstart 相當於pc端的onmousedown，詳細可參照先前寫的文件 事件 下同 ontouchend 相當於pc端的onmouseup.ontouchmove...

移動端事件

一 touch 1 touchstart 當手指觸碰螢幕時發生，不管當前多少根手指 2 touchmove 當手指在螢幕上滑動時連續觸發，通常我們在滑屏頁面，會呼叫event的preventdefault 可以阻止預設情況的發生 阻止頁面滾動 3 touchend 當手指離開螢幕時觸發 4 touc...

移動端滑動事件

專案中要實現乙個功能，在寬度高度固定的乙個div中放入幾張，的高度與div的高度相等，幾張的總長度要遠遠超過div的長度，那麼問題來了，如何才能讓使用者通過手指的滑動，看到所有的呢？這個可以有兩種方法 方法一 此時，已經可以進行的滑動了 方法二 在父元素上設定white space nowrap，保...