文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件 本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...四种之分 touchstart：手指触摸到屏幕会触发 touchmove：当手指在屏幕上移动时，会触发 touchend：当手指离开屏幕时，会触发 touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候...类事件 滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分 swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发...由此可知: touches记录的是屏幕上全部的触摸对象的信息 targetTouches记录的是当前DOM节点上全部的触摸对象的信息 changedTouches记录着触发该次事件的信息，一般长度为1...相应的数组对象内部为一系列坐标属性，可用来模拟其他事件如gesture手势事件等 ?

3.1K20

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

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....2.1 touch事件与click事件同时触发 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...当用户在触摸屏上移动触点(手指)的时候，触发这个事件。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理

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

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

    在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....2.1 touch事件与click事件同时触发 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...当用户在触摸屏上移动触点(手指)的时候，触发这个事件。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理

    8.2K80

    移动端手势的七个事件库

    2：Hammer.js:http://hammerjs.github.io/ Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。...3：QuoJS: QuoJS不仅是一个触摸事件管理器，还是一个功能丰富的类库，无需第三方JavaScript库（例如 jQuery, Prototype, Kendo ...）来创建基于浏览器应用程序的复杂项目...是轻量级模块化、面向对象的JavaScript库，定义了多种触摸手势，可以用于移动Web开发中简化HTML文件遍历、事件处理及Ajax交互等，让开发者轻松编写出高效的跨浏览器代码。...5：Swipe: 中文网：http://www.swiper.com.cn/ ? 图片发自简书App Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。...支持精确的触摸移动操作，而且还可以设置自动播放、等比例缩放等等实用性的功能。支持触摸移动，支持响应式页面。最近的一个项目中使用到了swipe.js这个插件 感觉非常的好用的，五颗星好评。

    5.7K40

    从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件

    但是呢，touch 事件并不是完美的，不管是我们自己封装的 tap 事件，还是 zepto 自带的 tap 事件，在移动端都有一个致命的缺陷，就是“点透”。 什么是“点透”呢？...这个时候，我们既想无延时，又不想触发点透效果，而且有的时候，我们希望我们的网页不仅可以在移动端访问，在 PC 模式下也可以访问，但是 tap 事件只能在移动端使用，所以只能用 click 事件，但是 click...它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。 iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。...2、swipe swipe.js 是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常作为轮播图使用。...swipe 会提供 next() , prev() 等函数来实现上一张下一张翻页。

    3.6K20

    从零开始学 Web 之 移动Web（三）Zepto

    Zepto 主要使用在移动端浏览器上面，由于移动端的浏览器都是比较新的平台，而 jQuery 主要是在 PC 上为了浏览器的兼容性而使用的，所以在移动端一般不使用 jQuery，因为它的兼容性失去了意义...二、手势事件封装 Zepto 将移动端的 touchStart，touchmove 和 touchEnd 封装成了一系列事件。 tap ：触摸屏幕时触发。...(如果你不需要检测单击、双击，使用 tap 代替)。 longTap ：长按时触发。当一个元素被按住超过750ms触发。 swipe：滑动屏幕时触发。...touch.js 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。...gesture.js 在触摸设备上触发 pinch 手势事件。

    1.7K20

    11-移动端开发教程-zepto.js入门教程

    API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤其适合移动端开发。...Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活，可以自定义组合模块 2....touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。...gesture 在触摸设备上触发 pinch 手势事件。...总结 zepto.js确实非常小巧，而且非常讨巧的利用了大家熟悉jQuery的优势，确实非常可爱的一个js库，设计的模块中庸而又实用，在移动端的触屏事件封装的很不错，移动端web开发值得推荐。

    2.7K50

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

    3、全屏自适应布局 　　适用场景：单页面网页，移动web app 页面。 二 、Box-sizing在移动端的使用 　　在百分比定宽的页面经常使用。...例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 触摸事件的响应顺序 1、ontouchstart 2、ontouchmove 3、ontouchend 4、onclick...  300ms延时 2、Event originalEvent （原生事件） 是jquery 封装的事件。...animationEnd 动画结束事件 3、移动端事件框架 例如 zepto  touch.js 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown...四、常见的移动端问题 1、什么是Retina 显示屏，带来了什么问题 　　retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina

    2K30

    jquery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型。 　　1.touch 事件。 　　　　tap 快速触摸屏幕并且离开，类似一种完整的点击操作。 　　　　...taphold 触摸屏幕并保持一段时间。 　　　　swipe 在1秒内水平移动30px屏幕像素上时触发。 　　　　...2.方向改变事件 　　　　orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数， 　　　　该参数有两种返回值：portrait...vmousedown 统一处理触摸和鼠标按下事件。 　　　　vmousemove 统一处理触摸和鼠标移动事件。 　　　　...vmouseup 统一处理触摸和鼠标按键松开事件。 　　　　vclick 统一处理触摸和鼠标点击事件。

    1.8K100

    JavaScript Mobile开发框架汇总

    目前Javascript移动开发框架有些共同的特点：专门为移动设备做了优化，提供标准的UI组件；提供跨平台的支持（Android、IOS、etc）；轻量级，由于手机网络访问的特点，所有的框架都要注意轻量...1、jQuery Mobile jQuery Mobile是一个可以帮助我们快速、高效构建跨平台的、统一界面的移动应用工具。也是最流行的一款Javascript移动开发框架。...jQuery Mobile的缺点就是性能很差，这个谁用谁知道。 如果jQuery不是你的菜，还可以试试 MooTools Mobile。...这个框架提供了增强de触摸事件，如tap、swipe、pinch、rotate等，另外也提供了强大的数据包支持，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。...它们都有各自的特点，其中Mobilize.js提供了将你的网站迁移到移动设备的功能，而且也提供了Wordpress的插件，有兴趣的可以试一试。

    1.6K30

    iOS_38_手势

    Pan平移手势 终于效果图: Swipe轻扫手势 LongPress长按手势 Pinch和Rotation手势 捏合(缩放)和旋转 终于效果图: 涂鸦 终于效果图: 事件分...3大类:触摸、加速计、远程遥控 仅仅有响应者的子类，才干够接收和处理事件 父类响应者中定义的事件处理接口例如以下： 触摸事件处理的四个方法例如以下：（仅仅要实现，系统会自己主动调用）...一个UITouch对象,代表着一根手指,手指移动,UITouch对象实时更新 一个UITouch对象,相应一根手指,记录着触摸时的全部信息 重要~常常使用UITouch的方法,取得触摸时的信息...(如位置、所点对象) 事件对象UIEvent,经常使用的属性是:事件类型 触摸的四个方法(即过程)具体解释:注意同一时候和一前一后触摸的情况 必须先找到事件的最合适的响应者(从父到子地找...,可同意移动的范围,50px范围内长按有效,默认是10px longPress.allowableMovement = 50; // 2.为nanaImgView 加入Swipe手势识别器对象

    1.4K20

    jquery.touchSwipe.min.js 的简单用法

    其中一个效果不能用点击来实现，要求必须使用触摸滑动切换来实现。对于zepot.js来说，我不是很熟悉，其功能也远远没有jQuery来得强大。因此，决定使用jq实现。问题是，jq是没有这个事件的。...找到jquery.touchSwipe.min.js这个插件。 官方文档全部中文，实在看不懂。看示例吧，也没看懂。我嘞个去，对不起当年的英语老师啊，恨不能回炉再造啊！！...简单把代码列在这里： $(window).swipe({ swipeLeft:function(){ // 向左滑动执行 }, swipeRight:function...更多内容，请参考： 官方地址：https://github.com/mattbryson/TouchSwipe-Jquery-Plugin 演示地址：http://labs.rampinteractive.co.uk...有两种方法，一种是这样写： win.swipe({ swipeLeft:function(){ //向左滑动 }, swipeRight:function(){

    1.3K20

    【Android 事件分发】ItemTouchHelper 源码分析 ( OnItemTouchListener 事件监听器源码分析 )

    ItemTouchHelper 继承 RecyclerView.ItemDecoration mRecyclerView.addItemDecoration(this); // 添加了每个条目上的触摸监听器..., 主要是拦截触摸事件方法 onInterceptTouchEvent 和 消费触摸事件方法 onTouchEvent ; public class RecyclerView extends ViewGroup..., 分析手指触摸的 按下 , 移动 , 抬起 事件 ; 在 OnItemTouchListener 触摸监听器中 , onInterceptTouchEvent 方法处理的是事件拦截机制 , onTouchEvent...MotionEvent event) { } } 中实现的 RecyclerView.OnItemTouchListener 接口的 onInterceptTouchEvent 方法 , 主要是用于作用与条目上的触摸事件的拦截...ItemTouchHelper 的业务逻辑中 , 不需要处理移动事件 ; 2、处理按下事件 当检测到 MotionEvent.ACTION_DOWN 按下操作时 , 获取按下的 XY 坐标 , 并进行滑动速度检测

    2.5K20

    读Zepto源码之Touch模块

    大家都知道，因为历史原因，移动端上的点击事件会有 300ms 左右的延迟，Zepto 的 touch 模块解决的就是移动端点击延迟的问题，同时也提供了滑动的 swipe 事件。...在触发 longTap 事件前，先将保存定时器的变量 longTapTimeout 释放，如果 touch 对象中存在 last ，则触发 longTap 事件， last 保存的是最后触摸的时间。...在低版本的移动端 IE 浏览器中，只实现了 PointerEvent ，并没有实现 TouchEvent ，所以需要这个来判断。...， deltaX 用来保存 x轴 上的位移， deltaY 来用保存 y轴 上的位移， firstTouch 保存初始触摸点的信息， _isPointerType 保存是否为 pointerEvent...可以看到，起点和终点的距离超过 30 时，会被判定为 swipe 滑动事件。 在触发完 swipe 事件后，立即触发对应方向上的 swipe 事件。

    1.2K00

    React开发实践：如何做出好用的Switch组件

    手势检测 手势交互的关键在于一套手势事件监测系统，用于检测move、tap、double tap、long tap、swipe、pinch、rotate等手势行为。...出于简化，我们的 Switch 组件只支持 move 事件，因此，本章也只实现 move 事件的检测。其他事件的检测在《HTML5 手势检测原理和实现》一文中做了详细介绍。...无论多么复杂的手势系统，他们都会基于四个最基础的触摸事件： touchstart touchmove touchend touchcancel 通过他们可以获取手指触摸点的坐标信息，进而算出手指移动的相对距离...那 move 事件应该加在 wrapper 上面还是 toggler 上面呢？经验之谈，在固定不动的元素上检测手势事件，这会为你减少很多Bug。...我们在 wrapper 上监听手指的 move 事件，将 move 事件发出的 deltaX 做累加，就是 toggler 的 translate 的 x 值。即： ?

    1.4K90
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券