在我們開始用原聲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，保...