文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件 本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...手势事件（目前只是一个概念，使用的时候需封装模拟） 使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到 一、事件定义及分类 1. click事件 单击事件，类似于PC端的...click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件，有touchstart touchmove touchend touchcancel...swipeDown longTap singleTap doubleTap', false); 点一下，如图为相关事件触发的顺序，可以看到click事件在touchend之后 ?...gesturechange：当有两根或多根手指在屏幕上，并且有手指移动的时候触发 gestureend：当倒数第二根手指提起的时候触发，结束gesture 按照定义，当分别将两根手指放到屏幕上的时候，

2.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    touch.js的使用总结

    //触摸过程被系统取消时触发（少用） 一、事件绑定 touch.on(element,types,callback); 参数描述： element   element或string    元素对象、...swipeend滑动手势终点 swipeleft向左滑动 swiperight向右滑动 swipeup向上滑动 swipedown向下滑动 swipe滑动 4、拖动 拖动开始    dragstart拖动屏幕...distance               swipe类两点之间的位移 distanceX, x           手势事件x方向的位移值, 向左移动时为负数 distanceY, y          ...手势事件y方向的位移值, 向上移动时为负数 angle            rotate事件触发时旋转的角度 duration                  touchstart 与 touchend...之间的时间戳 factor             swipe事件加速度因子 startRotate启动单指旋转方法，在某个元素的touchstart触发时调用

    1.8K10

    Android使用Espresso实现UI自动化测试

    Google使用Espresso测试了他们自己的超过30个应用程序，包括G+、Maps和Drive。...testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } 在defaultConfig中添加如上语句，支持测试运行...如果要测试AdapterView ,比如 ListView 或GridView等,使用上面的onView()方法是无效的，因为AdapterView的布局item是动态呈现的,没法直接指定，所以当要测试...也可以执行多个操作在一个perform中如：perform(click(),clearText())。 所有的操作都有一个前提 ———— 就是要执行的view必须在当前界面上显示出来（有且可见）。...方法名 含义 click() 点击view clearText() 清除文本内容 swipeLeft() 从右往左滑 swipeRight() 从左往右滑 swipeDown() 从上往下滑 swipeUp

    1.5K20

    10-移动端开发教程-移动端事件

    在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。 每 个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发 swipeRight：手指在屏幕上向右滑动时会触发 swipeUp：手指在屏幕上向上滑动时会触发 swipeDown...触屏事件：tap、singleTap、doubleTap、longTap(>750ms） 滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown <style

    6.8K80

    【技巧】ionic3的手势Gestures

    临睡前写点东西，时间有限，又是一篇简单的文章，是关于手势的，因为白天有人问到。 手势Gestures，ionic官网上的文档描述非常简单，就下面一段就没了，估计很多人看完直接就懵了：只有6个事件吗？...手势.png 我粗略搜索了ionic关于手势事件的文章，像pressup等内容的，居然没有，orz……ionic常常使用流行的库来补充自身，像slide组件就是封装了swiper，而手势是使用了另一个有名的库...所以我们通过了解HammerJS就可以知道ionic3的手势事件——其实是6种，我简单列一下分类及其下事件： 一、pan——平移 ? pan.png 最小平移距离为10px，才会识别为pan....swipe.png 要求移动速度0.3px/ms，移动距离超过10px，才会识别为swipe swipe swipeleft swiperight swipeup swipedown 六、tap—...tap.png 多次tap间隔为300ms，用以区分是不是双击或其它，最大按下时间为250ms，用以区分press或其它 tap 上述事件在ionic中普通使用即可，具体事件参数通过$event获取

    74230

    10-移动端开发教程-移动端事件

    在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。 每 个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 ...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发 swipeRight：手指在屏幕上向右滑动时会触发 swipeUp：手指在屏幕上向上滑动时会触发 swipeDown...触屏事件：tap、singleTap、doubleTap、longTap(>750ms） 滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown <style

    6.4K70

    自动化工具之Appium工具简单介绍

    简单介绍 Appium 是一个自动化测试开源工具，支持 iOS 平台和 Android 平台上的原生应用，web 应用和混合应用。...“移动原生应用”是指那些用 iOS SDK 或者 Android SDK 写的应用。...所谓的“移动web 应用”是指使用移动浏览器访问的应用（Appium 支持 iOS 上的 Safari 和 Android 上的 Chrome）。...在操作上面之前需要链接手机或者链接模拟器并操作命令显示：adb devices 如果是模拟器需要先链接：adb connect 127.0.0.1:62001这样再次链接 ? 模拟器链接显示： ?...在实际工作中这些远远是不够，但对与入门做参考和基础工程框架还是可以参考，如果想在运行测试类的时直接启动服务端需要参考命名怎么启动：可以参考https://www.cnblogs.com/yc-c/p/9015621

    2.1K10

    第135天：移动端开发经验总结

    3、全屏自适应布局 　　适用场景：单页面网页，移动web app 页面。 二 、Box-sizing在移动端的使用 　　在百分比定宽的页面经常使用。...animationEnd 动画结束事件 3、移动端事件框架 例如 zepto  touch.js 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown...显示屏中，像素点1个变为4个 　　在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。 　　...、 禁止文本缩放 当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { 　　-webkit-text-size-adjust...: 100%; } 8、移动端禁止选中内容 如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none

    1.6K30

    移动端app开发问题及理解

    ondragend 在拖动操作末端运行的脚本 ondragenter 当元素已被拖动到有效拖放区域是运行的脚本 ondragleave 元素离开有效拖放目标时运行的脚本 ondragover...元素滚动条被滚动时 移动端事件有 click 单击事件 类似于pc端click，移动端中，连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart 手指触摸到屏幕触发...touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕时，突然alert了，或者系统中其他打断了touch行为可触发...手指在屏幕上上滑触发 swipeDown 手指在屏幕上下滑触发 vant组件使用过程中遇到的问题 弹框dialog组件确认回调函数 最开始我绑定的是confirm事件 但是实际调用的时候接口一直调用进入死循环了...js如何与app端交互 具体可看下这个 https://zhuanlan.zhihu.com/p/337890794 我的理解 首先了解下 app移动端网页运行在手机应用内嵌的浏览器引擎中，没有UI

    3.8K10

    Touch 移动设备上的 手势识别 与 Js事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。...滑动手势终点 ~ swipeleft 向左滑动 ~ swiperight 向右滑动 ~ swipeup 向上滑动 ~ swipedown 向下滑动 ~ swipe 滑动 拖动开始 dragstart 拖动屏幕...参数描述 参数 类型 描述 delegateElement element或string 元素对象或选择器 types string 事件的类型，具体参数说明，同“事件代理”方法中的“types”参数说明...参数描述 参数 类型 描述 element element或string 元素对象、选择器 types string 事件的类型，具体参数说明，同“事件代理”方法中的“types”参数说明。...参数描述 参数 类型 描述 element element或string 元素对象或选择器 type string 事件的类型，具体参数说明，同“事件代理”方法中的“types”参数说明。

    4.1K40

    读Zepto源码之Touch模块

    大家都知道，因为历史原因，移动端上的点击事件会有 300ms 左右的延迟，Zepto 的 touch 模块解决的就是移动端点击延迟的问题，同时也提供了滑动的 swipe 事件。...;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap...，Zepto 实现了以下的事件： swipe: 滑动事件 swipeLeft: 向左滑动事件 swipeRight: 向右滑动事件 swipeUp: 向上滑动事件 swipeDown: 向下滑动事件 doubleTap...在触发 longTap 事件前，先将保存定时器的变量 longTapTimeout 释放，如果 touch 对象中存在 last ，则触发 longTap 事件， last 保存的是最后触摸的时间。...在低版本的移动端 IE 浏览器中，只实现了 PointerEvent ，并没有实现 TouchEvent ，所以需要这个来判断。

    93100

    会自动化不存在的（下）

    () { } @Override public void swipeUp() { } } 2-2 Manifest 配置键盘服务 在 AndroidManifest.xml...文件中，配置键盘服务，并在 service 的 meta-data 中引用元数据 <service android:name=".CustomService" android:permission...res/xml 中创建键盘按键展示的内容、布局、按键 Code 值 keyWidth：宽度；keyHeight：高度 horizontalGap/verticalGap：按键水平方向/垂直方向的间距 codes..." android:keyLabel="防折叠输入法（公众号：AirPython）" /> 2-4 创建键盘视图并设置监听 在键盘服务类中...最后，发布朋友圈的时候，切换到自定义的输入法，点击开始输入即可 需要注意的是，手机系统不一样，切换输入法的方式不一致 比如：魅族就需要在设置中先打开，然后输入的时候下拉状态栏，最后选择对应的输入法 ?

    54420

    Appium连续滑动操作——九宫格滑动

    应用背景 滑动操作一般是两点之间的滑动，而实际使用过程中用户可能要进行一些多点连续滑动操作。如九宫格滑动操作，连续拖动图片移动等场景。那么在Appium中该如何模拟这类操作呢？...使用TochAction需要先导入对应的模块 from appium.webdriver.common.touch_action import TouchAction 按压 方法：press() 开始按压一个元素或坐标点...tap(self, element=None, x=None, y=None, count=1) 移动 方法：move_to() 将指针从上一个点移动到指定的元素或点。...move_to(self, el=None, x=None, y=None) 注意： 移动到目标位置有时是算绝对坐标点，有时是基于前面一个坐标点的偏移量，这个要结合具体App来实践。...测试场景 安装启动随手记App 启动App后在密码设置选项中开启手机密码并滑动九宫格设置如下图形密码： ?

    1.3K30

    iOS_单元测试二之UITests

    { // 在UI测试中，当出现故障时，最好立即停止 continueAfterFailure = false // UI测试必须启动它们测试的应用程序。...在设置中这样做将确保每个测试方法都会发生这种情况 self.app.launch() } 一、XCUIApplication XCUIApplication应用程序的代理： 1、初始化和基本使用...XCUIDevice.Button.volumeUp) // 音量加 device.press(XCUIDevice.Button.volumeDown) // 音量减 #endif 三、XCUIElement XCUIElement在应用程序中的...() element.swipeDown() element.swipeLeft() element.swipeRight() // 用两次触碰发出捏的手势 // scale：捏手势的比例。...使用0到1之间的比例“收缩关闭”或缩小，使用大于1的比例“收缩打开”或放大 // velocity: 每秒尺度因子中的收缩速度 element.pinch(withScale: 0.5, velocity

    81020

    Cocos Creator基础教程(10)—预览调试

    浏览器预览 在原生模拟器中也可以模拟不同的设备尺寸、设置横竖屏，看下图： ?...模拟器预选项 日常的开发中，我们用的最为频繁的还是在浏览器中预览，这里推荐大家使用Google Chrome浏览作为开发调试环境。 2....游戏调试 在浏览器中启动预览后，可以开启Chrome的开发者工具进行游戏代码的浏览、调试、日志查看等调试代码中的问题。...启动开发者工具 在Chrome开发者工具窗口中使用快捷键ctrl+p或cmd+p呼出文件搜索窗口，快速定位代码文件（与VSCode的文件查找一样）。 ?...构建微信小游戏 Cocos Creator支持多平台构建模板，如果你开发的是微信小游戏，一定要在微信开发者工具中预览调试。在构建发布窗口中，简单设置就可以构建出目标平台所需的文件，请看下图： ?

    2.9K20

    谷歌 IDX 集成 iOS 和 Android 模拟器，扩展了模板库

    作者 | Sergio De Simone 译者 | 明知山 策划 | 丁晓昀 在推出六个月后，谷歌扩展了其基于 AI 和云的实验性共享工作空间项目 IDX，引入了 集成的 iOS 模拟器和...Android 模拟器、新的项目模板，与 Nix 包管理器更好的集成，等等。...当你使用 Flutter 或 Web 模板时，IDX 会智地为你的应用程序加载正确的预览环境——Safari 移动版和 Chrome Web 模板，或 Android、iOS 和 Chrome Flutter...通过添加自定义 IDX 启动器模板、语法高亮、错误检测、代码完成以及更好地处理损坏配置，IDX 中的 Nix 支持得到了改进。...IDX 旨在简化跨 Web 和移动平台全栈式开发的复杂性，它跨越了许多不同的栈，包括 Angular、Vue、React、Flutter、Go、Python、Google Cloud 等等。

    12810

    一文读懂H5移动开发调试技巧

    可以看到 H5 已经在「壳子」中运行起来了，下来就可以尝试调用 Webview 的方法，和「壳子」交互了。更多的调试技巧可以参考文章：iOS 模拟器调试。...首先，开启 Android 手机的「开发者选项」，勾选 「USB 调试」 然后，Chrome 中输入：chrome://inspect，进入调试页面。...可以在浏览器安装一个 Chrome 插件，用于将当前页面链接转换成二维码，这样就能边开发边真机预览，非常方便。...九、场景分析 既然移动端调试有这么多种方案，那在实际操作中，我该如何取舍？...平台，与 Charles 类似，查看、控制网络请求，分析数据情况； 5.Spy-Debugger： 移动端调试的利器，便捷的远程调试手机页面、抓包工具； 6.Whistle：基于 Node 实现的跨平台

    1.5K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券