前言

今天寫一個(gè)小Demo，有個(gè)地方涉及到了左滑右滑的邏輯，本來(lái)想著用插件來(lái)著，但是想到自己好久沒(méi)用原生JS寫滑動(dòng)的監(jiān)聽了，所以試著用原生JS來(lái)實(shí)現(xiàn)了一下，畢竟溫故而知新嘛，同時(shí)做個(gè)記錄。先把實(shí)現(xiàn)的效果貼出來(lái)：

構(gòu)思

想要寫出絲滑的觸摸滑動(dòng)事件的監(jiān)聽，要考慮以下3個(gè)方面的邏輯：

距離： 滑動(dòng)距離要大于40 時(shí)間： 滑動(dòng)時(shí)間小于在0.5秒，即500毫秒內(nèi)完成手指按下，拖動(dòng)，離開（避免只是手指在屏幕就觸發(fā)） 滑動(dòng)方向： 左右滑動(dòng)的條件是：X軸移動(dòng)的距離大于Y軸移動(dòng)的距離，為正則向左，為負(fù)則向右上下滑動(dòng)的條件是Y軸移動(dòng)的距離大于X軸移動(dòng)的距離，為正則向上，為負(fù)則向下

有了基礎(chǔ)的構(gòu)思，我們就可以根據(jù)這個(gè)思路來(lái)完成代碼了~

監(jiān)聽的事件

說(shuō)到監(jiān)聽觸摸滑動(dòng)，要用到的自然就是下面這三個(gè)觸摸事件了：

1. touchstart 觸摸開始，手指點(diǎn)擊屏幕時(shí)觸發(fā)（可監(jiān)聽多點(diǎn)觸控，后面的手指也同樣會(huì)觸發(fā)）

2. touchmove 接觸點(diǎn)改變，滑動(dòng)時(shí)持續(xù)觸發(fā)

3. touchend 觸摸結(jié)束，手指離開屏幕時(shí)觸發(fā)

這三個(gè)觸摸事件每個(gè)都包括了三個(gè)觸摸對(duì)象列表（可根據(jù)觸摸點(diǎn)實(shí)現(xiàn)多點(diǎn)觸控）：

1. touches：當(dāng)前屏幕上的所有手指觸摸點(diǎn)的列表

2. targetTouches：當(dāng)前DOM元素上手指的列表

3. changedTouches：當(dāng)前事件手指的列表

同時(shí)每個(gè)觸摸對(duì)象Touch包含的屬性如下：

- identifier：標(biāo)識(shí)觸摸的唯一ID

- pageX：觸摸點(diǎn)在頁(yè)面中的x坐標(biāo)

- pageY：觸摸點(diǎn)在頁(yè)面中的y坐標(biāo)

- screenX：觸摸點(diǎn)在屏幕中的x坐標(biāo)

- screenY：觸摸點(diǎn)在屏幕中的y坐標(biāo)

- clientX：觸摸點(diǎn)在視口中的x坐標(biāo)

- clientY：觸摸點(diǎn)在視口中的y坐標(biāo)

- target：觸摸的DOM節(jié)點(diǎn)

代碼實(shí)現(xiàn)

有了上面的構(gòu)思和觸摸事件的基礎(chǔ)，我們很容易就能把代碼敲出來(lái)啦~

let box = document.querySelector(’body’) // 監(jiān)聽對(duì)象let startTime = ’’ // 觸摸開始時(shí)間let startDistanceX = ’’ // 觸摸開始X軸位置let startDistanceY = ’’ // 觸摸開始Y軸位置let endTime = ’’ // 觸摸結(jié)束時(shí)間let endDistanceX = ’’ // 觸摸結(jié)束X軸位置let endDistanceY = ’’ // 觸摸結(jié)束Y軸位置let moveTime = ’’ // 觸摸時(shí)間let moveDistanceX = ’’ // 觸摸移動(dòng)X軸距離let moveDistanceY = ’’ // 觸摸移動(dòng)Y軸距離box.addEventListener('touchstart', (e) => { startTime = new Date().getTime() startDistanceX = e.touches[0].screenX startDistanceY = e.touches[0].screenY})box.addEventListener('touchend', (e) => { endTime = new Date().getTime() endDistanceX = e.changedTouches[0].screenX endDistanceY = e.changedTouches[0].screenY moveTime = endTime - startTime moveDistanceX = startDistanceX - endDistanceX moveDistanceY = startDistanceY - endDistanceY console.log(moveDistanceX, moveDistanceY) // 判斷滑動(dòng)距離超過(guò)40 且 時(shí)間小于500毫秒 if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {// 判斷X軸移動(dòng)的距離是否大于Y軸移動(dòng)的距離if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {// 左右console.log(moveDistanceX > 0 ? ’左’ : ’右’)} else {// 上下console.log(moveDistanceY > 0 ? ’上’ : ’下’)} }})

運(yùn)行一下看看吧：

可以看出，觸摸時(shí)間大于500ms不會(huì)觸發(fā)，滑動(dòng)距離小于40也不會(huì)觸發(fā)，如果是有角度的滑動(dòng)，則會(huì)以XY軸移動(dòng)距離最遠(yuǎn)的為準(zhǔn)。完美實(shí)現(xiàn)！

后記

前端框架發(fā)展日益迅猛，很多人直接上手學(xué)習(xí)框架也毫無(wú)壓力，對(duì)原生JS的學(xué)習(xí)就不那么重視了。但萬(wàn)變不離其宗，框架的優(yōu)勢(shì)在于它的設(shè)計(jì)思想和模式，想要深刻的理解還是要有原生JS做基礎(chǔ)，想要走得遠(yuǎn)，還是要把基礎(chǔ)夯實(shí)，畢竟萬(wàn)丈高樓平地起不是？

到此這篇關(guān)于如何利用原生JS實(shí)現(xiàn)觸摸滑動(dòng)監(jiān)聽事件的文章就介紹到這了,更多相關(guān)JS觸摸滑動(dòng)監(jiān)聽事件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！