手勢

MIP封裝了單擊，雙擊，滑動等手勢，可在元件中使用

#範例

var util = require('util');
var Gesture = util.Gesture;
var customEle = require('customElemenet').create();


var build = function () {
    var gesture = new Gesture(this.element);

    // on 可接受多个事件名做为参数，以空格分隔。如 gesture.on('tap swipe')
    gesture.on('tap', function (event, data) {
        // 原始事件。如tap事件是通过 touchend 触发，event为tap对应的touchend事件对象
        console.log(event);
        // gesture 计算后的数据。参数介绍见后面
        console.log(data.type); // "tap"
    });
};

初始化參數介紹

gesture 實例化時第二個參數可以傳一個object做為配置參數

範例：

   // 默认阻止纵向滑动事件
    var gesture = new Gesture(element, {
        preventY: true
    });

具體參數介紹：

preventDefault         是否阻止默认事件
preventX               是否阻止横向滑动时的默认事件
preventY               是否阻止纵向滑动时的默认事件
stopPropagation        是否阻止事件冒泡

預設參數：

// 如果初始化时不传入配置参数，会使用下面的配置进行初始化
{
    preventDefault: false,
    stopPropagation: false,
    // 默认会阻止横滑的事件，考虑到浏览器横滑有很多默认操作，所以在这里默认阻止横滑
    preventX: true,
    preventY: false
}

gesture 數據物件介紹

資料物件做為事件處理函數的第二個參數傳入。

範例：

    gesture.on('tap', function (event, data) {
        console.log(data);
    });

通用欄位：

angle              滑动角度，如横滑为0度
deltaTime          从开始到结束的时间间隔。单位是msdeltaX             横轴位移
deltaY             纵轴位移
direction          方向。0: 未变动   1: 上   2:右   3: 下   4: 左
distance           移动距离
pointers           触摸点
timeStamp          事件发生的时间戳
velocity           速度
velocityX          横向速度
velocityY          纵向速度
x                  触摸中心点坐标x
y                  触摸中心点坐标ytype               事件类型

擴充欄位：

各手勢可以向資料物件中擴充欄位。如swipe 事件中的swipeDirection 字段，請看手勢辨識器介紹

手勢辨識器

手勢辨識器可以接收gesture 資料對象，並辨識出具體手勢，觸發具體的手勢事件。

手勢辨識器物件在使用者綁定事件時自動創建，在使用者解綁事件時自動銷毀。

目前有三種內建辨識器：tap、dobuletap、swipe

tap

使用方法:

gesture.on('tap', function (event, data) {
    console.log('单击');
});

doubletap

#雙擊，如果同時綁定tap和doubletap，tap事件會延遲300ms觸發以判斷是否觸發雙擊。

使用方法：

gesture.on('tap', function (event, data) {
    console.log('双击');
});

swipe

滑動

#使用方法：

// 使用方法1：
gesture.on('swipe', function (event, data) {
    console.log(data.type); // "swipe"
    console.log(data.swipeDirection); // "up" or "right" or "down" or "left"
});

// 使用方法2：
gesture.on('swipeup swipedown', function (event, data) {
    console.log(data.type) // "swipeup" or "swipedown"
    console.log(data.swipeDirection) // "up" or "down"
});