你可能須要的小知識(一)--移動滑塊的兼容

你可能須要的小知識(一)

移動滑塊在PC端與移動端的兼容

前言

---

你們好，我是阿k，一個前端新人。從這篇文章開始，這個系列就計劃跟你們分享我平常工做中碰到的一些問題以及個人解決方案，也許你正好須要，我也但願可以幫到你，OK，話很少說，咱們就進入主題吧！

背景

---

由於公司目前的主要業務根據地是PC端網頁，並且我前腳進公司，後腳就來了一個測試小妹妹，呸，是小姐姐，而後給我提了上一個前端留下來的十幾個bug(我如今知道爲何不要得罪測試了，哇的一聲哭出來，我改還不行嗎)，微笑，世界如此美好~。而後，其中有一個bug就是，在ipad端不能滑動註冊時發送驗證碼的滑塊，ok，咱們來看一下怎麼回事。

情景再現

---

就是這個最多見的校驗滑塊！！一開始我天真的覺得，這不是很簡單，不是分分鐘搞定？過了五分鐘...又過了五分鐘...ok,這裏咱們先跳過個500分鐘！可是，這真的只要5分鐘就能夠解決！

來人，上代碼

---

(默默的把圖片拉過來)

最初他的代碼是這樣寫的，也就是自己只綁定了一個mouse事件，那麼既然如此，又怎麼可能在ipad上滑動呢？

衆所周知，咱們在綁定事件的時候，能夠經過$event來獲取到當時的事件信息，固然頁包括鼠標事件啦，那麼既然如此，咱們在ipad上能使用mouse事件嗎？答案固然是確定的啦，確定不行啦(只用手指哪裏來的鼠標嘛)。(此時我聽見遠遠的有同窗問，那是什麼事件)ok,既然如此我只好勉爲其難的回答一下(臉紅,羞澀)，他就是touch事件！！！

沒錯，就是touch事件，因此咱們在給元素綁定的時候，由於須要考慮到移動端的設備，那麼就須要用到touchStart事件，因此還須要綁定這樣一個事件：

綁定完事件以後，天然是定義事件啦，那定義事件的時候，咱們就須要來削微的判斷一下，究竟是mouse仍是touch。

若是監測到touch事件，那天然是移動端了，若是沒有，那咱們就乖乖的用mouse事件吧！

而後，緊跟着，由於移動距離的判斷，也一樣須要用到事件自己，因此咱們還須要在移動過程當中進行一個判斷，在移動的函數計算時使用，

咱們這樣就能夠計算出，究竟是鼠標仍是手指的移動距離，和咱們須要的距離是否相等，就判斷出是否滑動到位啦，怎麼樣，是否是很簡單？！另外這裏要注意一點，就是移動過程當中，須要添加一個阻止默認事件，避免屏幕跟隨滑動。

最後，咱們須要對這兩個事件進行一個監聽和銷燬，也就能夠在鉤子函數中添加兩個監聽事件，來收尾咱們此次的工做。

結語

---

整個過程其實很簡單，相信各位大佬也必定有本身的更好的方法，我這裏記錄下來也是幫本身作一個知識回顧，也但願可以幫到下一個碰到這個問題的同窗吧。由於這是第一次寫，若是不足或者不正確地方，但願你們多多指正，我必定儘快修改，謝謝你們！