首先需要导入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. python 文件和路径操作函数小结
  2. python copy函数用法_Python深浅拷贝
  3. linux idc账号,快速安全地建立Linux用户账户
  4. Batch request processing in backend
  5. 编码是件有逻辑的事情
  6. 【操作系统】Semaphore处理吸烟者问题
  7. 基于asp.net2 C#开发MapServer
  8. 频数直方图的步骤_如何运用QC七大手法和九大步骤分析问题?
  9. SQL SELECT语句的基本用法
  10. 嵩天python_跟着北京理工大学嵩天老师学习Python
  11. hybird app混合开发介绍
  12. html整体字体微软雅黑,网页布局中对全局字体的最佳控制_html/css_WEB-ITnose
  13. 读书笔记-干法-付出不亚于任何人的努力!
  14. SecureCRT连接交换机Console口
  15. Android手机存储路径
  16. docker安装memos
  17. 获取商品ID下所有的sku精准库存api
  18. C语言:求分解一个任意合数为质数乘积形式
  19. python软件设计数据分析统计服_学习笔记(一)-python制作数据分析工具
  20. 流量魔盒“骗”了多少人?快来看看吧!~

热门文章

  1. 网络安全专家教你设置史上最安全的WiFi密码
  2. Solana中的account
  3. locale 国际化配置(springboot)
  4. win7计算机系统还原,win7怎么系统还原 还原步骤详解
  5. C++ 重载、重写及其区别
  6. 人类简史-读书笔记之历史演变图
  7. 1330: PIPI的乐高积木
  8. 2014 你好,再见
  9. 抖音只有几十个播放量的原因是什么?
  10. This is a CONNECT tunnel, through which encrypted HTTPS traffic flows.