资讯专栏INFORMATION COLUMN

Hammer.js源码解析(1) - 整体架构

source / 2005人阅读

摘要:一直以来都想着去详细了解手势事件相关的东西,又因为一直以来使用的都是,所以想着通过阅读的源码来学习手势的相关知识。

一直以来都想着去详细了解手势事件相关的东西,又因为一直以来使用的都是Hammer.js,所以想着通过阅读Hammer.js的源码来学习手势的相关知识。

首先,我们来看Hammer.js的整体架构(Hammer.js的版本都是2.0.8)

我们来看,Hammer.js的初始化的流程图

var myElement = document.getElementById("hitarea");
var mc = new Hammer(myElement);

Hammer.js中需要理解的核心:

manager,是整个Hammer.js的管理者,维系Hammer.js中各个模块

需要添加必须的css,在 new TouchAction() 和 toggleCssProps()两个方法中设置

创建当前的Input事件(监听手势的事件,如Touch, Pointer, Mouse等)以及对这些方法的处理

手势的检测和触发,都包含的 Recognizer 的方法之中

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

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

相关文章

  • Hammer.js源码简析

    摘要:最后一点思考都是在冒泡阶段绑定事件处理器,为什么不在捕获阶段拦截事件尼,如果一个向右活动的手势被识别,后续的事件如已经没必要再传给子节点,完全可以在拦截的元素上处理,这样性能上也应该会有一点提升,挖个坑给自己以后实现一下。 开始 话说上周周末闲的蛋疼,突然想了解一下前端手势如何处理,好解开自己一个知识盲点,于是开始啃源码。。。并纪录一下。 一个手势 在我们的前端页面里面复杂的手势应该是...

    lushan 评论0 收藏0
  • 开发者必备的 12 个 JavaScript 库

    摘要:有了这些工具,开发者们就能专注于创意设计了,而不用为某个功能而花费太多精力。这里我们介绍的是个开发者们必备的库,都是一些很基础功能很强大的库。可通过来获取当前显示的页号,并提供选项来定制默认页号加速器阴影和延时。 现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的 创意,就产生...

    muddyway 评论0 收藏0
  • Vue.js资源分享

    摘要:中文官网英文官网组织发出一个问题之后,不要暂时的离开电脑,如果没有把握先不要提问。珍惜每一次提问,感恩每一次反馈,每个人工作还是业余之外抽出的时间有限,充分准备好应有的资源之后再发问,有利于问题能够高效质量地得到解决。 Vue.js资源分享 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/maid...

    vpants 评论0 收藏0
  • javascript框架学习计划

    摘要:前言终于要做这个计划了,前端框架千千万,绝不能一头扎进去盲目开始,本片文章总结一下目前前各种端框架,以及它们的用途主要解决什么问题,然后最后做出学习计划。希望入了前端坑的同学们可以有所帮助。但是库与框架很难严格区分,所以统一称为解决方案。 前言:终于要做这个计划了,前端框架千千万,绝不能一头扎进去盲目开始,本片文章总结一下目前前各种端框架,以及它们的用途主要解决什么问题,然后最后做出学...

    airborne007 评论0 收藏0
  • [译] 在 Angular 中使用 HammerJS (触摸手势)

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

    lifesimple 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<