移动端H5触屏事件

最新推荐文章于 2024-03-29 06:13:32 发布
最新推荐文章于 2024-03-29 06:13:32 发布
阅读量1k 收藏 1
点赞数
分类专栏： vue javascript 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Artemis_Wang/article/details/119059194
版权

移动端H5主要包括  3  种触屏事件

  • touchstart：手指接触屏幕时触发
  • touchmove：已接触的手指开始移动后触发
  • touchend：手指离开屏幕时触发

解释：

  1.     每个触摸事件对象都包括touches属性，用于描述目前位于屏幕上所有手指的信息
  2.     单指操作中，使用  touches[0]  即可

注：在vant组件上直接调用touchmove事件可能不生效，替换为touchmove.native即可

Artemis_Wang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mobileAdapt:移动端加载h5页面适配
05-29
cpsc 移动端加载h5页面适配，实现swiper图片轮播使用任意尺寸手机屏幕，同时图片宽高也是可以任意指定，不采用@media()标签。 在浏览器模式下，加载的页面能够自由变换长宽而让页面保持适配，但是在移动端却会由于不同屏幕的宽高而出现问题。 本例实现再移动端加载h5页面，采用swiper控件实现图片轮播和手指触摸滑动效果。 难点： 由于移动端加载h5的时候获取的视口大小与完全渲染h5时获取的视口大小不一致，会导致swiper需要计算宽高问题不正确 解决方案： 通过onready、document.readyState="complete"都不奏效，采用计时器延缓计算swiper高度
h5学习之触屏事件
qq_39773416的博客
09-11 476
一、手机触屏事件 最后了解以下标签内的 date自定义值属性 设置属性方法： div-dataset-name = “值” //name 这个名字可以随意改变是自定义的 div-dataset-name1-name2 = “值” //name 这个名字可以随意改变是自定义的 在js中获取到这些自定义值的方法如下面实例，可以弹出自定义里面的值 <div id="div" d...
H5移动端常用事件，此中大有文章
最新发布
2301_81749759的博客
03-29 887
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！
H5 -触摸事件
weixin_43091563的博客
01-02 726
touch事件 touchstart事件：按下手指，触发 touchmove事件：移动手指，触发（在这个事件发生期间，调用preventDefault()事件可以阻止滚动） touchend事件：移走手指，触发 touchcancel事件：当系统停止跟踪触摸的时触发 touch事件包含下面三个用于跟踪触摸的属性+DOM属性 touches：表示当前跟踪的触摸操作的touch对象的数组...
H5中扩展触摸的事件
空白的博客
06-09 462
H5中扩展了专门用于识别触摸的事件：touchstart：触摸开始的时候触发，只要有一个手指触摸。touchmove：手指在屏幕上滑动的时候触发。touchend：触摸结束的时候触发，全部手指全部离开touchecancel：当因意外原因结束触摸时触发（如弹出窗口）。触摸事件的事件对象扩展新属性：touches：当前位于屏幕上的所有手指的列表touchList。targetTouches：位于当前...
HTML5触摸事件
好女绪的博客
10-01 1269
取材自： html5手机触屏touch事件介绍 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别 HTML5触摸事件详解 HTML5触摸事件包含： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调...
移动端html5模拟长按事件的实现方法
09-22
1. **放弃click事件**：在触摸设备上，click事件会有300ms的延迟，这是为了等待用户可能的双击操作。因此，我们不能依赖click事件来区分单击和长按。 2. **使用touchstart和touchend事件**：当用户触碰屏幕时，会...
vue h5移动端禁止缩放代码
12-13
安卓 ... <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ios 在APP.vue里面写 [removed] [removed] = function() { document....
解决vue的touchStart事件及click事件冲突问题
11-20
因为移动端设备上的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次，这样毫无意义。这里提醒下，PC是无法识别touch相关事件 二、解决方式 （1）...
unity 手机 触屏 控制玩家 移动 方向
07-01
unity 手机 触屏 控制玩家 移动 方向
H5标签进入或退出可见区域时触发事件
高彬的专栏
04-14 625
任意一个html元素进入可见区域时触发指定事件，退出可见区域时也触发指定事件，并可控制执行次数。浏览器支持IntersectionObserver则使用不支持则使用scroll 监听。
H5之12__触摸与单击：基本的事件处理
daozhongyang的专栏
12-04 8008
在HTML5中， 如果基于鼠标的界面互动是单击， 触摸界面的基本交互方式就是 轻触. 一. 轻触与单击有相似之处， 但是也有不同. 即使触摸设备(例如： 手机) 没有鼠标，它们的浏览器仍然会触发鼠标事件， click, mouseover, mousedown 和 mouseup 都还会被触发。 二 移动浏览器有四种类型的触摸事件 事件名称 描
h5移动端新增事件
song854601134的博客
03-31 1887
为什么touch事件中要阻止浏览器的默认行为 那肯定是在能支持触屏的设备上运行，比如手机，手机上你滑动的时候他本身就有个默认的滚屏，因此如果你要操作操作你个dom元素，用touchmove事件，这其实也是滑动。原本你的效果是要在dom上滑动然后产生相应的效果，这个时候你肯定不希望手机上的浏览器屏幕滚动，所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验。 touchmove 默认会有滚动效果吗！？？ 移动端,同一页面不同层的划动操作会造成相互影响,需要额外处理 如:页面层和弹出层(如picke
H5案例分享：移动端滑屏 touch事件
weixin_30500289的博客
10-18 325
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛，类似于PC端的图片轮播，但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。touchmove: //在屏幕...
移动端H5混合开发，Touch触控，拖拽，长按, 滑屏 实现方案
weixin_30475039的博客
07-21 1961
概述 　　近期由于产品快速原型开发的需要，不想用原声的方式开发App两端一起搞时间来不及，目前产品处于大量上feature的阶段，采用混合开发是最合适的选择，所以花了3天的时间研究怎么去实现移动端，拖拽，长按，读取手机相册并做本地预览。 　　想要实现的效果就是： 上传一张图片作为背景图片，能够在图片位置上打点相当于打tag　 在手机屏幕上长按在事件发生的中心位...
H5页面开发的touchmove事件
04-21 489
在做一屏滚动的H5页面的时候，必须移除touchmove事件，如果不移除，在安卓机上会触发微信原生的向下滚动拉出刷新。在IOS上出现上下都可以继续滑动，所以需要移除document的touchmove事件。 $(document).on('touchmove',function(event){ event.preventDefault(); }); 转载于:...
移动端开发概览【webview和touch事件】
weixin_30377461的博客
03-30 166
作为一个前端，而且作为一个做移动端开发的前端，那意味着你要有三头六臂，跟iOS开发哥哥一起打酱油，跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chrome中进行开发的页面，拿着iPhone和安卓机来进行测试，传说中它们的浏览器内核也是WebKit，那么问题来了，同样的页面为什么在ios中和安卓中表现不同，出现了各种稀奇古怪的bug......
移动端h5登录注册页面
07-24
首先，移动端h5登录注册页面需要采用响应式设计，使其能够自动适应不同的手机屏幕尺寸，以提供更好的用户体验。 其次，该页面一般会通过表单的方式收集用户的登录和注册信息，例如用户名、密码、手机号码等。为了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值