首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >touch.js的使用总结

touch.js的使用总结

作者头像
青梅煮码
发布于 2023-03-02 12:29:55
发布于 2023-03-02 12:29:55
1.9K00
代码可运行
举报
文章被收录于专栏:青梅煮码青梅煮码
运行总次数:0
代码可运行

Touch 手机端的操作

基本事件:

touchstart  //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

touchcancel  //触摸过程被系统取消时触发(少用)

一、事件绑定
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
touch.on(element,types,callback);

参数描述:

element   element或string    元素对象、选择器

types  string 事件的类型(多为手势事件),可接受多个事件以空格分开;支持原生事件的透传

callback    function  事件处理函数, 移除函数与绑定函数必须为同一引用;

二、部分手势事件
1、缩放

pinchstart缩放手势起点

pinchend缩放手势终点

pinch缩放手势

pinchin收缩

pinchout放大

2、旋转

rotateleft向左旋转

rotateright向右旋转

rotate旋转

3、滑动

swipestart滑动手势起点

swiping滑动中

swipeend滑动手势终点

swipeleft向左滑动

swiperight向右滑动

swipeup向上滑动

swipedown向下滑动

swipe滑动

4、拖动

拖动开始    dragstart拖动屏幕

拖动           drag拖动手势

拖动结束     dragend拖动屏幕

5、长按

hold    长按屏幕

6、敲击

tap单击屏幕

doubletap双击屏幕

三、部分事件处理函数

originEvent触发某事件的原生对象

type事件的名称

rotation旋转角度

scale缩放比例

direction操作的方向属性

fingersCount操作的手势数量

position相关位置信息, 不同的操作产生不同的位置信息

distance               swipe类两点之间的位移

distanceX, x           手势事件x方向的位移值, 向左移动时为负数

distanceY, y          手势事件y方向的位移值, 向上移动时为负数

angle            rotate事件触发时旋转的角度

duration                  touchstart 与 touchend之间的时间戳

factor             swipe事件加速度因子

startRotate启动单指旋转方法,在某个元素的touchstart触发时调用

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Touch 移动设备上的 手势识别 与 Js事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。 Touch.js对于网页设计师来说,是一款不错的辅助工具,可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感,而且在节约时间,减少人力投入也有极大的帮助。
青梅煮码
2023/01/14
4.6K0
Touch 移动设备上的 手势识别 与 Js事件库
移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件
书童小二
2018/09/03
2.8K0
移动端前端常见的触摸相关事件touch、tap、swipe等整理
读Zepto源码之Touch模块
对角另一面
2017/12/27
1K0
10-移动端开发教程-移动端事件
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
老马
2018/02/18
7.4K0
10-移动端开发教程-移动端事件
【技巧】ionic3的手势Gestures
手势Gestures,ionic官网上的文档描述非常简单,就下面一段就没了,估计很多人看完直接就懵了:只有6个事件吗?
IT晴天
2018/08/20
8390
移动端app开发问题及理解
vant官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/
全栈程序员站长
2022/07/02
4.1K0
移动端app开发问题及理解
SNS项目笔记<六>--手势Gestures
这里直接贴上angular源码地址:angular源码之hammer_gestures <这里方便它更新后的修改> 这里又贴上该地址的源码以便说明:
stormKid
2018/09/12
1.7K0
SNS项目笔记<六>--手势Gestures
iOS中手势的应用1. 四类事件的主要方法2. 响应者链3. 手势识别功能(Gesture Recognizer)4. 手势的使用
iOS设备现如今大受欢迎的最重要原因之一就在于其开创了触控操作的潮流。发展到现在,无论是Android还是iPhone,现在APP与用户进行交互,基本上都是依赖于各种各样的触控事件。例如用户对屏幕进行了侧滑,APP就需要对这个手势进行相应的处理,给用户一个反馈。这些相应的事件就都是在UIResponder中定义的。 广告插播的措不及防:如果您要是觉得这篇文章让您有点收获,随手点个赞会让俺兴奋好久吶。 UIResponder大体有四类事件:触摸、加速计、远程控制、按压(iOS9.0以后出来的,3DTou
stanbai
2018/06/28
2.5K0
【愚公系列】2023年12月 HarmonyOS教学课程 039-ArkUI事件(单一手势)
应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。
愚公搬代码
2025/06/02
1410
【愚公系列】2023年12月 HarmonyOS教学课程 039-ArkUI事件(单一手势)
移动端的touch事件处理
在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明:
周陆军博客
2023/05/07
2K0
touch事件,touchEvent对象
随着智能手机普及,有越来越多的手机网页和网页版游戏,手机触摸、移动、旋转等等,多种操作。一般电脑的人机交互靠的是鼠标,而手机用的就是触摸。区别有:
冬夜先生
2021/09/06
1.2K0
超小Web手势库AlloyFinger原理(转载)
目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用。
lin_zone
2018/08/15
1.1K0
超小Web手势库AlloyFinger原理(转载)
【IOS开发进阶系列】手势专题
        iPhone中处理触摸屏的操作,在3.2之前是主要使用的是由UIResponder而来的如下4种方式:
江中散人_Jun
2023/10/16
7190
【IOS开发进阶系列】手势专题
网页|利用touch实现下拉刷新
下拉刷新在常见的手机app上大多都有运用。下拉刷新即向下拉重新加载、刷新。下拉刷新在下拉到松手的过程中,经历了三个状态分别是:当前手势滑动位置与初始位置差值大于零时,提示正在进行下拉刷新操作。之后当下拉到一定值时,显示松手释放后的操作提示。最后当下拉到达设定最大值松手时,执行回调,提示正在进行更新操作。如下图则为下拉刷新的实现效果:
算法与编程之美
2020/07/16
1.9K0
网页|利用touch实现下拉刷新
第135天:移动端开发经验总结
会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
半指温柔乐
2018/09/11
1.8K0
Appium连续滑动操作——九宫格滑动
滑动操作一般是两点之间的滑动,而实际使用过程中用户可能要进行一些多点连续滑动操作。如九宫格滑动操作,连续拖动图片移动等场景。那么在Appium中该如何模拟这类操作呢?
清风穆云
2021/08/09
1.3K0
jimojianghu
有天,辛苦做了个复杂操作功能的页面,上线后有用户反馈:很多功能使用不了。惊了,以为是哪里出了bug。 立马联系用户,才发现原来是用户使用笔记本电脑,没有禁用触控板,然后不小心碰到导致整个界面都放大,很多功能超出界面不见了。 然而那能怎么办,用户第一,自然得快速解决这个问题,而且是触控板和触摸屏都得解决。
落寞的鱼丶
2022/02/07
4.1K0
React开发实践:如何做出好用的Switch组件
前言 HTML5 将 Web 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动,如果只是将 PC 端的点击体验简单地移植到移动端,势必让移动端体验变得了无生趣。以某 AP
CSDN技术头条
2018/02/12
1.2K0
React开发实践:如何做出好用的Switch组件
iOS_38_手势
默认是会调用其[super touchesXXX],这个super就是上一个响应者
全栈程序员站长
2022/07/06
1.1K0
iOS_38_手势
EasyTouch☀️ 三、提供的工具脚本讲解
Action triggering:Simple_Tap / Double_Tap 双击 / 单击
星河造梦坊官方
2024/08/14
1720
EasyTouch☀️ 三、提供的工具脚本讲解
相关推荐
Touch 移动设备上的 手势识别 与 Js事件库
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验