移动端触摸事件

触摸事件touch

与pc端一样，移动端也有自己的事件，不同的就是将pc端的鼠标，变成了人手。

触摸事件touch在pc端是无效的，在开发者工具的移动端模拟器时，鼠标的点击事件就会变为触摸事件，是有效的。

触摸事件允许多点触控，事件触发的位置信息包含在touches属性中。

如果再给body绑定一个点击事件，触摸事件和点击事件都是会触发的。

基本触摸事件如下：

        var bodyDom = document.querySelector('body');

        bodyDom.ontouchstart = function(e) {
   
            console.log(e);
            console.log('触摸开始事件');
        }
        bodyDom.ontouchmove = function(e) {
   
            console.log(e);
            console.log('触摸移动事件');
        }
        bodyDom.ontouchend = function(e) {
   
            console.log(e);
            console.log('触摸结束事件');
        }

我们会发现，并没有滑动事件。但是对于移动端来说，滑动屏幕是极其常见的，这时候就需要我们自行封装自定义事件，来实现不同方向的滑动。

最基本的思路就是：利用touchstart，touchmove，touchend来获取到开始位置与结束位置。通过比较他们的绝对值和差值的正负，来判断到底是向什么方向滑动，进而进行对应操作。代码如下：

var swiperEvent = {
   
    eventAll: {
   }, //存放所有事件及其处理函数

    // 初始化函数，利用触摸事件touch来获取开始位置，结束位置，判断滑动方向。
    init: function(dom) {
   
        dom.eventAll = {
   };
        dom.addEvent = this.addEvent;
        dom.emit = this.emit;
        dom.removeEvent = this.removeEvent;
        dom.touchData =