Zepto中touch模块的使用（移动端）

首先需要导入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模块的使用（移动端）相关推荐

移动端touch模块
在自己写touch事件时,总是会出现各种各样的bug,正好发现zepto的touch模块,很好用,而且由于zepto和jquery语法的相似性,这个模块也可以直接引用到jquery中, 得花时间好好消 ...
android touch事件无反应,移动端touch事件
当用户手指放在移动设备在屏幕上滑动会触发的touch事件 webkit: touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 touchmove--当手指在屏幕上滑动时连续触发.通常 ...
Zepto.js库touch模块代码解析
Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...
js ws 状态_node.js中ws模块创建服务端和客户端，网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
node.js中ws模块创建服务端和客户端，网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
前端项目开发中碰到的坑、移动端兼容性问题
前端开发中碰到的坑.移动端兼容性问题 1.ios兼容input光标高度问题:input输入光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样. **出现问 ...
vue 多个click_vue中touch和click共存的解决方式
在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove. ...
Python中collections模块
目录 Python中collections模块:模块实现了特定目标的容器,以提供Python标准内建容器 dict.list.set.tuple 的替代选择. Counter:字典的子类,提供了可哈希 ...
javascript中的模块系统
文章目录简介 CommonJS和Nodejs AMD异步模块加载 CMD ES modules和现代浏览器在HTML中使用module和要注意的问题简介在很久以前,js只是简单的作为浏览器的交 ...
python中socket模块常用吗_python网络学习笔记——socket模块使用记录
此文章记录了笔者学习python网络中socket模块的笔记. 建议初次学习socket的读者先读一遍socket模块主要函数的介绍. socket模块的介绍可以参考笔者的前一篇关于socket官方文 ...

Zepto中touch模块的使用（移动端）

Zepto中touch模块的使用（移动端）相关推荐

最新文章

热门文章