touch与bootstrap简单实现移动端切换（重点在touch）

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是全局变量因此不需要形参都是可以调用的