原文:https://www.cnblogs.com/zhwl/p/3525238.html

hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档。

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
// 先要对监听的DOM进行一些初始化
var 
hammer =
new 
Hammer(document.getElementById(
"container"
));
 
// 然后加入相应的回调函数即可
hammer.ondragstart =
function
(ev) { }; 
// 开始拖动
hammer.ondrag =
function
(ev) { };
// 拖动中
hammer.ondragend =
function
(ev) { };
// 拖动结束
hammer.onswipe =
function
(ev) { };
// 滑动
 
hammer.ontap =
function
(ev) { };
// 单击
hammer.ondoubletap =
function
(ev) { };
//双击
hammer.onhold =
function
(ev) { };
// 长按
 
hammer.ontransformstart =
function
(ev) { };
// 双指收张开始
hammer.ontransform =
function
(ev) { };
// 双指收张中
hammer.ontransformend =
function
(ev) { };
// 双指收张结束
 
hammer.onrelease =
function
(ev) { };
// 手指离开屏幕

还支持jQuery插件的形式调用

1
2
3
4
5
6
7
8
9
 
$(
"#element"
)
   
.hammer({
        
// 对DOM进行一些初始化,这里可以加入一些参数
   
})
   
.bind(
"tap"
,
function
(ev) {
        
console.log(ev);
   
});

官网地址:http://eightmedia.github.com/hammer.js/  (带演示)
源码地址:https://github.com/EightMedia/hammer.js

移动开发框架,Hammer.js 移动设备触摸手势js库的更多相关文章

  1. 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  2. 移动开发框架,Hammer.js 移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.t ...

  3. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  4. ios实例开发精品文章推荐(8.12)11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

  5. 毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库

    毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库 在线演示地址: http://m.yunxunmi.com/ 支持 IOS Android Ipad 等不同操作系统的手持或 ...

  6. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  7. 超棒的JS移动设备滑动内容幻灯实现 - Swiper

    来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...

  8. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

  9. Android 触摸手势基础 官方文档概览

    Android 触摸手势基础 官方文档概览 触摸手势检测基础 手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: Moti ...

  10. Android 触摸手势基础 官方文档概览2

    Android 触摸手势基础 官方文档概览 触摸手势检测基础 手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: Moti ...

随机推荐

  1. mysql事务中使用临时表

    最近在使用存储过程完成晚上数据的定时汇总功能,其中需要在存储过程中启用事务,但是发现使用了create table语句后事务会自动提交这个语句前的语句,即便是这个语句后发生了错误进行了回滚. 测试语句 ...

  2. flutter如何调试夜神模拟器

    1.下载夜神模拟器 地址:https://www.yeshen.com/ 下载后直接傻瓜式安装即可 2. 将夜神模拟器设置为手机版本 打开夜神模拟器,点击点击右上角的设置: 然后选择 性能设置 然后 ...

  3. ssh免密登录,服务器互信。

    1.ssh-keygen 产生本主机的公钥和私钥. ssh-keygen -t rsa 文件保存在 ~/.ssh/目录下,其中 id_rsa:本地服务器的私钥 id_rsa.pub:本地服务器的公钥 ...

  4. Springboot 3.x 集成Knife4j [踩坑日记]

    之前项目用的是SpringBoot2.x 新项目用了SpringBoot3.x版本,引入Knife4j 报错java.lang.TypeNotPresentException: Type javax. ...

  5. 安川YASKAWA工业机器人板卡维修策略

    一.安川YASKAWA工业机器人板卡识别故障症状 首先,需要准确识别电路板故障的症状.这通常包括安川YASKAWA机器人操作不稳定.错误代码频繁出现.某些功能失效或整体性能下降等.通过仔细观察和诊断, ...

  6. Python基础笔记-while、字符串格式化、运算符、基础概念与数据类型

    前言 !!!注意:本系列所写的文章全部是学习笔记,来自于观看视频的笔记记录,防止丢失.观看的视频笔记来自于:哔哩哔哩武沛齐老师的视频:2022 Python的web开发(完整版) 入门全套教程,零基础 ...

  7. 【ABAQUS Material】density 行为

    1.overview 进行eigenfrequency . transient dynamic analysis. transient heat transfer analysis. adiabati ...

  8. PPT_标题

    一 调节字体大小 1.字体-字魂71号-御守锦书 2.更改字体大小(138.96.80.80.96.138) 3.字体背景 复制背景图片->选择ppt文字->设置图片格式->选择来自 ...

  9. 【由技及道】统一封装API返回结果后String返回报错文件解决原理--Spring 消息转换器的层次图解与规则说明【人工智障AI2077的开发问题日志002】

    ▄▀▄ ▀■■■▀ AI2077的日志片段 ▄■■■■■▄ [ERROR] | 量子通道波动异常! | 检测到StringConverter试图吞噬ApiResult对象 | 启动二向箔防御程序... ...

  10. Proteus中数码管动态扫描显示不全(已解决)

    前言 我是直接把以前写的 51 数码管程序复制过来的,当时看的郭天祥的视频,先送段选,消隐后送位选,最后来个 1ms 的延时. 代码在 Proteus 中数码管静态是可以的,动态显示出了问题--显示不 ...