首先需要导入zepto中的touch.js插件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Zepto中touch模块的使用(移动端)</title><meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
</head>
<body><div id="touch_test" style="font-size: 36px; width: 200px; height: 200px; background: #cce">touch events test</div><script type="text/javascript" src="../../lib/zepto.min.js"></script><script type="text/javascript" src="../../lib/touch.js"></script>//从GitHub上下载到本地<script>$(document).ready(function(){$('#touch_test').bind('touchmove', function(e) { e.preventDefault() })listen_to('#touch_test')function listen_to(el) {$(el).tap(function(){console.log(' | tap!') //tap触摸手机屏幕时触发}).doubleTap(function(){console.log(' | double tap!') //连续触摸两次是触发}).swipe(function(){console.log(' | swipe!')  //滑动手机屏幕时触发}).swipeLeft(function(){console.log(' | swipe left!') // 向左滑动时触发}).swipeRight(function(){console.log(' | swipe right!') // 向右滑动时触发}).swipeUp(function(){console.log(' | swipe up!') // 向上滑动时触发}).swipeDown(function(){console.log(' | swipe down!') // 向下滑动时触发}).longTap(function(){console.log(' | long tap!')  //长按时触发}).singleTap(function(){console.log(' | single tap!') // 单击时触发})}});</script>
</body>
</html>

Zepto中touch模块的使用(移动端)相关推荐

  1. 移动端touch模块

    在自己写touch事件时,总是会出现各种各样的bug,正好发现zepto的touch模块,很好用,而且由于zepto和jquery语法的相似性,这个模块也可以直接引用到jquery中, 得花时间好好消 ...

  2. android touch事件无反应,移动端touch事件

    当用户手指放在移动设备在屏幕上滑动会触发的touch事件 webkit: touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 touchmove--当手指在屏幕上滑动时连续触发.通常 ...

  3. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

  4. js ws 状态_node.js中ws模块创建服务端和客户端,网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...

  5. node.js中ws模块创建服务端和客户端,网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...

  6. 前端项目开发中碰到的坑、移动端兼容性问题

    前端开发中碰到的坑.移动端兼容性问题 1.ios兼容input光标高度 问题:input输入光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样. **出现问 ...

  7. vue 多个click_vue中touch和click共存的解决方式

    在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove. ...

  8. Python中collections模块

    目录 Python中collections模块:模块实现了特定目标的容器,以提供Python标准内建容器 dict.list.set.tuple 的替代选择. Counter:字典的子类,提供了可哈希 ...

  9. javascript中的模块系统

    文章目录 简介 CommonJS和Nodejs AMD异步模块加载 CMD ES modules和现代浏览器 在HTML中使用module和要注意的问题 简介 在很久以前,js只是简单的作为浏览器的交 ...

  10. python中socket模块常用吗_python网络学习笔记——socket模块使用记录

    此文章记录了笔者学习python网络中socket模块的笔记. 建议初次学习socket的读者先读一遍socket模块主要函数的介绍. socket模块的介绍可以参考笔者的前一篇关于socket官方文 ...

最新文章

  1. 安装rebar时提示Uncaught error in rebar_core
  2. 关于实验中的makefile相关知识
  3. windows下编译lua源码
  4. JAVA中this用法小结
  5. worker进程和task进程区别_celery 每个 worker 在执行任务时,如何配置一定数量的 task?...
  6. Hive开发要知道数据仓库的四个层次设计
  7. python 代理的使用
  8. 《开源框架那点事儿14》:教计算机程序解数学题
  9. 大专计算机应用基础课件,11春大专《计算机应用基础》练习课件.doc
  10. 开始学习C#.Net
  11. 三轴合并_用两套乐高60107合并成铰接式云梯消防车,看看和60112有什么区别
  12. [转]JS将图片转为base64编码
  13. 六万字 HTTP 必备知识学习,程序员不懂网络怎么行,一篇HTTP入门 不收藏都可惜
  14. 将域名从易名中国(www.ename.cn)转移到中国万网(www.net.cn)
  15. android吉他谱组件,android手机吉他谱
  16. Python Turtle画奥运标志
  17. 汉字转拼音接口 get请求 无需注册
  18. 中国环境检测市场运营现状分析与投资规划研究报告2022年版
  19. html颜色代码错误,HTML颜色代码表
  20. Chef入门详解 Chef安装 Chef使用

热门文章

  1. 京牌车辆过户以后车辆保险怎么办?
  2. 百鸡百钱问题和( 30人消费50元,可能包括男人女人小孩,男人3元,女人2元,小孩1元,问各有多少人)问题
  3. word与mathtype——“运行时错误48,文件未找到:MathPage.wll”解决
  4. 【web前端】第二天-HTML标签(下)
  5. shimano 型号详解 (zz)
  6. Django模板渲染错误
  7. 14年macmini装双硬盘_苹果2014款Mac mini更换固态硬盘图文教程
  8. 车金融|金融产品规则引擎的前世今生(中篇)
  9. Mac OS X 清除DNS缓存
  10. Rancher 离线安装 longhorn 存储类