移动端touch事件执行顺序

最新推荐文章于 2023-02-15 15:03:10 发布
最新推荐文章于 2023-02-15 15:03:10 发布
阅读量434 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43276017/article/details/118705610
版权

touchstart->touchmove（可无）->touchend->click
如果不想触发click事件可在touchend中阻止默认事件发生

event.preventDefault();

如发现touch时没触发click事件，请检查是否阻止了默认事件

吃香菜也吃西红柿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue的touchStart事件及click事件冲突问题
10-15
主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Touch事件传递顺序。
weixin_34109408的博客
02-07 149
2019独角兽企业重金招聘Python工程师标准>>> ...
touchend与click顺序
weixin_34235371的博客
10-02 165
http://www.w3cmm.com/javascript/touch.html     click 在 touchend之前   去除超链接的虚线框   http://www.cnblogs.com/kingwell/archive/2012/06/20/2555670.html   http://zhidao.baidu.com/link?url=vo8iRBTf1s9V...
移动端触摸事件顺序
2197
08-17 601
touchstart touchend mousedown mouseup click function eventUtil(elem,type){ elem.addEventListener(type,function(e){ console.log(type,e.timeStamp); },false); } eventUtil(oDiv,"touchstart"); ...
click事件的执行顺序
weixin_34168700的博客
07-15 350
最近要做一个手机端的热门标签动画的效果，要求手指离开屏幕的时候执行动画，点击热门标签又要跳转到搜索页，但点击热门标签的时候只会执行动画，不会跳到搜索页，后来得知手指点击屏幕的时候不只会触发click事件，还可能触发touch系列事件，而touch相关事件都是先于内嵌的onclick执行的，于是研究了一下点击事件的执行顺序。 测试代码： <body><a href="javas...
vue自定义移动端touch事件之点击、滑动、长按事件
08-27
Vue自定义移动端Touch事件之点击、滑动、长按事件 在移动端开发中，Touch事件是非常重要的一部分，我们经常需要监听用户的触摸操作，如点击、滑动、长按等。Vue框架提供了多种方式来处理Touch事件，但是在实际开发...
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
在移动设备上，为了实现与用户的交互，Vue.js 提供了一套基于原生 JavaScript `touch` 事件的自定义事件处理机制。Vue 的 touch 事件处理使得开发者可以在移动端项目中轻松实现点击、滑动和长按等操作。下面我们将...
浅谈移动端之js touch事件 手势滑动事件
10-21
主要和大家聊一聊移动端之js touch事件，即手指的滑动事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS移动端拖拽touch
10-24
总的来说，JS移动端拖拽touch涉及到的技术主要包括JavaScript Touch事件的监听与处理、元素位置的动态更新、边界检测以及可能的动画效果。理解和掌握这些技术，对于构建具有优秀用户体验的移动端应用至关重要。
移动端事件顺序、解决300毫秒点击延迟
weixin_43294560的博客
06-08 651
【代码】移动端事件顺序、解决300毫秒点击延迟。
移动端点击事件触发顺序
a464064368的博客
04-24 1724
移动端点击事件触发顺序 移动端页面事件触发顺序和事件触发规则不同于PC端，一般都知道click在移动端会延迟200~300ms触发。 本文从实例出发，演示移动端事件的触发规则和顺序。 HTML页面： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
web前端—前端三剑客之JS(16)：移动端事件
北冥有鱼的博客
07-10 469
触摸式设备也拥有鼠标事件 目录 移动端的主要事件 移动端事件的触发对象 移动端事件对象的位置属性 移动端事件的触发顺序 其他事件对象 阻止浏览器默认行为 移动端的主要事件 touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。 touchend：当手指从屏幕上移开时触发。 touchcancel：当系统停止跟踪触摸时触发。...
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4041
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
touch事件 以及 点击穿透的三种解决方法(移动端)
weixin_46022934的博客
11-14 4985
移动端 touch事件以及touch事件点击穿透的解决方法 提示： touchstart—>touchmove—>touchend ----> click 上面的四种点击都可以在移动端进行使用!但是有明确的区别! 移动端:touchstart — touchmove — touchend ,三个事件是专门为移动端监测,触摸开始(按下),触摸移动,触摸结束(离开),三个事件. 文章目录移动端 touch事件以及touch事件点击穿透的解决方法前言一、touch事件1.touchstart-
移动端开发touchstart，touchmove，touchend事件详解使用
m0_38109616的博客
03-28 3976
页面使用到了触摸事件"touchstart"，“touchmove”，“touchend”。需求：当你手指接触到屏幕并向左滑动时，被滑动的服务商信息开始向左滑动同时出现"编辑"和"停用"操作按钮。若继续用手指向右滑动，那么就会隐藏"编辑"和"停用"按钮，回到一开始的正常状态。下图展示了向左滑动和向右滑动产生的效果。 从一开始到左滑动完成： 从左滑动完成开始向右滑动知道完成。 触摸事件（touch Events） 　　　　touchstart,touchmove,touchend事件都有13个事件属
iOS的HTML5不支持click，'touchend'通用
irizhao的专栏
09-06 2096
如：$api.addEvt(body, 'touchend', function(e) {
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
04-09 1245
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。 做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。 之后百度了一下这个问题，原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致tou...
移动端touch事件和click事件的区别
weixin_42371145的博客
07-16 1790
移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发，这个好像比较少用 每个触摸事件被触发后，会生成一个event对象 2....
实现移动端touch事件的横向滑动列表效果
最新发布
05-14
实现移动端touch事件的横向滑动列表效果可以使用原生的JavaScript和CSS3来实现。 首先，我们需要在HTML中创建一个容器元素，用来包含列表项。容器元素需要设置overflow-x属性为scroll，使得内容超出容器范围时可以滚动。 ```html <div class="container"> <ul class="list"> <li>项1</li> <li>项2</li> <li>项3</li> <li>项4</li> <li>项5</li> </ul> </div> ``` 然后，在CSS中，我们需要设置容器元素和列表项的样式，以及使用CSS3的transition属性来实现平滑的过渡效果。 ```css .container { width: 100%; overflow-x: scroll; -webkit-overflow-scrolling: touch; /* 添加iOS滚动效果 */ } .list { display: flex; flex-wrap: nowrap; /* 设置列表项不换行 */ transition: transform 0.3s ease; /* 添加平滑的过渡效果 */ } .list li { width: 100px; height: 100px; margin-right: 10px; background-color: #ccc; } ``` 最后，在JavaScript中，我们需要监听容器元素的touchstart、touchmove和touchend事件，计算滑动距离并通过改变列表项的transform属性来实现横向滑动效果。 ```javascript const container = document.querySelector('.container'); const list = document.querySelector('.list'); let isDragging = false; let startPosition = 0; let currentTranslate = 0; let prevTranslate = 0; let animationId = 0; container.addEventListener('touchstart', touchStart); container.addEventListener('touchmove', touchMove); container.addEventListener('touchend', touchEnd); container.addEventListener('touchcancel', touchEnd); function touchStart(event) { if (event.target.classList.contains('list')) { isDragging = true; startPosition = event.touches[0].clientX; animationId = requestAnimationFrame(updateAnimation); container.classList.add('grabbing'); } } function touchMove(event) { if (isDragging) { const currentPosition = event.touches[0].clientX; currentTranslate = prevTranslate + currentPosition - startPosition; } } function touchEnd() { isDragging = false; cancelAnimationFrame(animationId); prevTranslate = currentTranslate; container.classList.remove('grabbing'); } function updateAnimation() { list.style.transform = `translateX(${currentTranslate}px)`; animationId = requestAnimationFrame(updateAnimation); } ``` 通过以上代码，我们就成功地实现了移动端touch事件的横向滑动列表效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值