Hammer.js中文教程

一、什么是hammer.js

hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。允许同时监听多个手势、自定义识别器,也可以识别滑动方向。
优点:

  • 为移动端网页添加相关手势
  • 去除移动端上的点击事件的300ms延迟
  • hammer.js通过压缩只有7kb,而hammer-time.js通过压缩只有1kb,因此彻底不用考虑引入他们以后的性能问题

二、Rotate事件

在绑定的DOM对象中,当两根手指或更多手指呈圆形旋转时触发(就像两根手指拧螺丝一样)

  • Rotatestart:旋转开始
  • Rotatemove:旋转过程
  • Rotateend:旋转结束
  • Rotatecancel:旋转取消

三、Pinch事件

在指定的DOM对象中,两根手指(默认为两根手指,多指触控需要单独设置)或多根手指相对移动或相向移动的事件

  • Pinchstart:多点触控开始
  • Pinchmove:多点触控过程
  • Pinchend:多点触控结束
  • Pinchcancel:多点触控取消
  • Pinchn:多点触控时两手指距离越来越近
  • Pinchout:多点触控时两手指距离越来越远

四、Press事件

在指定的DOM对象中,进行初评的点击事件,相当于PC端的click事件,最小按压时间为500
ms

  • Pressup:点击事件离开时触发

五、Pan事件

在指定的DOM对象中,一个手指放下并移动事件,即触屏中的拖动事件(它会时刻执行触发事件就行mousemove事件一样)

  • Panstart:拖动开始
  • Panmove:拖动过程
  • Panend:拖动结束
  • Pancancel:拖动取消
  • Panleft:向左拖动
  • Panright:向右拖动
  • Panup:向上拖动
  • Pandown:向下拖动

六、Tap事件

在指定的DOM对象中,进行触屏的点击事件,相当于PC端的click事件,最大按压时间为250ms

七、Swipe事件

在指定的DOM对象中,一根手指快速的在触屏上滑动,即我们平时用的最多的滑动事件(和Pan事件类似,但是一次行为只会判定一次事件)

  • SwipeLeft:向左滑动
  • Swiperight:向右滑动
  • Swipetup:向上滑动
  • Swipedown:向下滑动
// 示例
// 取一个DOM对象并定义一个hammer对象
var hammertime = new Hammer(document.getElementById("test")); 
// 为这个DOM事件绑定Swipe事件,并且e为事件对象
hammertime.on("swipe",function(e){document.getElementById("a").innerHtml += "swipe偏移量:x-" + e.deltaX + ",y-" + e.deltaY;console.log(e);
})

官网下载: https://hammerjs.github.io/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/434474.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Wpf 使用 Prism 实战开发Day16

客户端使用RestSharp库调用WebApi 动态加载数据 在MyDoTo客户端中,使用NuGet 安装两个库 RestSharp Newtonsoft.Json 一. RestSharp 简单的使用测试例子 当前章节主要目的是:对RestSharp 库,根据项目需求再次进行封装。下面先做个简单的使用…

[SpingBoot] 3个扩展点

初始化器ApplicationContextInitializer监听器ApplicationListenerRunner: Runner的一般应用场景就是资源释放清理或者做注册中心, 因为执行到Runner的时候项目已经启动完毕了, 这个时候可以注册进注册中心。 文章目录 1.初始化器ApplicationContextInitializer2.监听器Applica…

系统架构设计师教程(十七)通信系统架构设计理论与实践

通信系统架构设计理论与实践 17.1 通信系统概述17.2 通信系统网络架构17.2.1局域网网络架构17.2.2 广域网网络架构17.2.3 移动通信网网络架构17.2.4存储网络架构17.2.5 软件定义网络架构17.3 网络构建关键技术17.3.1 网络高可用设计17.3.2 IPv4与IPv6融合组网技术17.3.3 SDN技术…

光明之盒:揭开可解释性人工智能的神秘面纱

在人工智能(AI)的日益普及之际,可解释性人工智能(Explainable AI,简称XAI)成为了桥接人机理解的关键技术。XAI不仅让人们窥视AI的内在工作原理,还能够提高我们对其决策过程的信任感。本文将深入…

物联网IOT: 风浆叶片拧紧装配及实时监测系统

某大型风电设备,通过机器人应用与精益化生产体系的融合,打造出行业领先的具备柔性生产能力的“脉动式”生产体系。同时在关键工序上。其中,在叶片装配等关键工序上使用由智能机器人代替人工,以提高生产的效率和装配质量可靠性,将六轴机器人、视觉系统、光电系统、液压、气动、伺…

仅使用 Python 创建的 Web 应用程序(前端版本)第08章_商品详细

在本章中,我们将实现一个产品详细信息页面。 完成后的图像如下。 Model、MockDB、Service都是在产品列表页实现的,所以创建步骤如下。 No分类内容1Page定义PageId并创建继承自BasePage的页面类2Application将页面 ID 和页面类对添加到 MultiPageApp 的页面中Page:定义PageI…

HbuilderX报错“Error: Fail to open IDE“,以及运行之后没有打开微信开发者,或者运行没有反应的解决办法

开始 问题:HbuilderX启动时,打开微信开发者工具报错"Error: Fail to open IDE",以及运行之后没有打开微信开发者,或者运行没有反应的解决办法! 解决办法: 按照步骤一步一步完成分析,除非代码报错,否则都是可以启动的 第一步:检查HbuildX是否登录账号 第二步:检查微信…

Stable Diffusion插件Recolor实现黑白照片上色

今天跟大家分享一个使用Recolor插件通过SD实现老旧照片轻松变彩色,Recolor翻译过来的含义就是重上色,该模型可以保持图片的构图,它只会负责上色,图片不会发生任何变化。 一:插件下载地址 https://github.com/pkuliyi…

机器学习 | 利用Pandas进入高级数据分析领域

目录 初识Pandas Pandas数据结构 基本数据操作 DataFrame运算 文件读取与存储 高级数据处理 初识Pandas Pandas是2008年WesMcKinney开发出的库,专门用于数据挖掘的开源python库,以Numpy为基础,借力Numpy模块在计算方面性能高的优势&am…

内网穿透natapp使用教程(Linux)

我的使用场景:在家访问学校服务器,由于不在一个局域网,所以需要使用内网穿透,我使用的是natapp。需要在有局域网的时候做好以下步骤。 (natapp官网:https://natapp.cn/) 1. 下载客户端 &#x…

Spring MVC 请求流程

SpringMVC 请求流程 一、DispatcherServlet 是一个 Servlet二、Spring MVC 的完整请求流程 Spring MVC 框架是基于 Servlet 技术的。以请求为驱动,围绕 Servlet 设计的。Spring MVC 处理用户请求与访问一个 Servlet 是类似的,请求发送给 Servlet&#xf…

【Linux】从C语言文件操作 到Linux文件IO | 文件系统调用

文章目录 前言一、C语言文件I/O复习文件操作:打开和关闭文件操作:顺序读写文件操作:随机读写stdin、stdout、stderr 二、承上启下三、Linux系统的文件I/O系统调用接口介绍open()close()read()write()lseek() Linux文件相关重点 复习C文件IO相…