hammerjs的初始化发生了什么

ddongjian0000 发布于2019-08-23 18:23 / 2835人阅读

摘要：一个移动端的手势库。的过程最简单的使用一个手势的定义绑定事件调用初始化在中可以看到下面一段代码用于定义一个手势操作的元素定义配置参数定义如果为默认默认同步注册了同理同步注册也可以外部采用注册同步绑定事件中的实际上为调用中的

hammerjs ———— 一个移动端的手势库。

New Hammer 的过程

最简单的使用一个手势的demo

</>复制代码 
 // 定义 Manager
 var hammertime = new Hammer(element, {});
 // 绑定事件
 hammertime.on("pan", function(e) {
 TODO Logic...
})

调用 Hammer function 初始化

在hammer.js中可以看到下面一段代码用于定义一个Manager(element, options)
element: 手势操作的元素
options: 定义配置参数

</>复制代码 
function Hammer(element, options) {   
 options = options || {};
    // 定义recongnizers, 如果 options.recongnizers 为 undefined, 默认 "Hammer.defaults.preset"
    options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
    return new Manager(element, options);
}

默认 recongnizers, TapRecognizer 同步注册了 TapRecognizer, 同理 PinchRecognizer 同步注册 RotateRecognizer (也可以外部采用 recognizer.recognizeWith() 注册同步Recognizer.)

preset: [

</>复制代码 
  // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
  [RotateRecognizer, {enable: false}],
  [PinchRecognizer, {enable: false}, ["rotate"]],
  [SwipeRecognizer, {direction: DIRECTION_HORIZONTAL}],
  [PanRecognizer, {direction: DIRECTION_HORIZONTAL}, ["swipe"]],
  [TapRecognizer],
  [TapRecognizer, {event: "doubletap", taps: 2}, ["tap"]],
  [PressRecognizer]

绑定事件handler (hammertime.on)

demo中的 hammertime.on("pan", function(e) { }) 实际上为调用 manager.js 中的 on function

</>复制代码 
on: function(events, handler) {
    if (events === undefined) {
        return;
    }
    if (handler === undefined) {
        return;
    }
    var handlers = this.handlers; // bind handlers to Manager.handler
    each(splitStr(events), function(event) {
        handlers[event] = handlers[event] || [];
        handlers[event].push(handler);
    });
    return this; // this = Manager
},

GPU云服务器云服务器美国政府：今年发生了三起针对水处理厂的勒发生了 hammerjs 为什么我的服务器没有了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105131.html

[译] 在 Angular 中使用 HammerJS (触摸手势)

摘要：是一个为应用添加触摸手势的非常受欢迎的库文中将看到结合一起使用是多么的简单原文示例是针对版本经过测试在目前最新的版本中此教程依然适用文章将以来统一代称版本名词滑动和类似但滑动更快速无粘滞左滑右滑上滑下滑头像轮播简介我们将构建一个头像轮播可以 HammerJS 是一个为 web 应用添加触摸手势的非常受欢迎的库,文中,将看到 Angular 结合 HammerJS 一起使用是多么的简单 ...

lifesimple 2019-08-20 17:29 评论0 收藏0
超小Web手势库AlloyFinger原理

摘要：目前作为腾讯手机手势解决方案，在各大项目中都发挥着作用。因此也入选了腾讯平台的精品组件除了国内外的项目团队都在使用，国内外的各大网站也进行了转载报道，作为超级小的手势库，腾讯的项目为什么不选择而选择下面从各个角度架构原理上进行一下分析。目前AlloyFinger作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。感兴趣的同学可以去Github看看： https://git...

Karuru 2019-08-20 12:12 评论0 收藏0
腾讯 AlloyTeam 移动 Web 裁剪组件 AlloyCrop 正式开源

摘要：兼容性如何支持以及的设备的浏览器便可运行不一一列举一共不到行为什么体积这么小腾讯手内大量的都会去不断地从各个维度进行性能优化。腾讯内部有哪些项目在用目前主要是兴趣部落群等业务在用，刚刚开源出来，只要有裁剪图片的地方都会用到。传送门 Github地址：https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop 在线De...

yexiaobai 2019-08-20 12:21 评论0 收藏0