手势

收藏238

阅读13802

更新时间2022-04-11

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"
});

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号