touch與bootstrap簡單實現移動端切換

在此，我將以最簡單的方式呈現出移動端切換的核心程式碼

這段程式碼將會在監聽touch事件時對拖動長度進行計算從而決定是否要呼叫bootstrap中的切換展示函式

第一步，我們對需要監聽的元素新增監聽觸控與觸控移動功能

document.getElementById("main_middle").addEventListener("touchstart", Drag_switch_first);
document.getElementById("main_middle").addEventListener('touchmove', Drag_switch_second);
 

他會對id為main_middle的元素進行touchstart和touchmove監聽   

第二步,對touchstart觸發的Dragswitchfirst函式進行配置

var Drag_switch_first_data;
function Drag_switch_first() {
    Drag_switch_first_data = event.touches[0].clientX;
}

我們用一個全域性變數Drag_switchfirstdata來儲存觸控時的橫座標當點選時,event會得到監聽觸發的對應的event物件和touches物件我們已第一根手指為關注點所以有event.touches[0]

最後一步，當滑鼠移動時判斷是否觸發切換展示函式

function Drag_switch_second() {
    var Drag_switch_second_data = event.touches[0].clientX;
    if ((Drag_switch_second_data - Drag_switch_first_data) > 50) {
    $('#tree_carousel').carousel('next');
    }
}

這裡首先定義了Drag_switchseconddata來儲存當前move時touches物件的橫座標而後當兩者的座標值之差大於正五十時切換 (即向右滑是不會切換的)

可以說實現的方法核心十分簡單，同時我也會寫一些我在這之中踩到的坑.

一、為什麼我用touchmove而不用touchend：答案十分簡單，因為touchend的touches物件中沒有clientX屬性在這裡我用console.log()分別取出使用touchstart和touchend的event.touches[0]物件

這裡我們可以用搜索很清晰的看到兩者的不同，後者是沒有clientX屬性的，這算是一個坑吧; 二、這個坑屬於我自身對於event物件理解不深中的招在摸索出核心的原理之前我看過許多其他人的實現，但是我發現他們都會在監聽中加上一個ev的實參

document.getElementById("main_middle").addEventListener("touchstart", Drag_switch_first(ev));

下面我就演示加上ev傳遞引數的結果，看看是否真的addeventlistener會返回一個引數  很顯然，結果顯而易見，瀏覽器提示ev是未定義的，說明並沒有引數傳過來實際上這裡直接不需要ev用event接收就可以了，event是全域性變數因此不需要形參都是可以呼叫的