touchstart touchmove touchend click mouseup mousedown

最新推荐文章于 2024-08-17 15:12:25 发布
最新推荐文章于 2024-08-17 15:12:25 发布
阅读量298 收藏
点赞数
分类专栏： js特性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjiali123123/article/details/82873010
版权

对于这几个event的理解：

1touchstart比click要先执行，等到touchstart-》touchend执行完，才触发click 大概200ms左右，

2.touchstart和touchmove和touchend应用在移动端，mouseup，mousedown应用在windows。

wangjiali123123
关注
专栏目录
移动端 click延时的3种解决方案 禁止缩放 自定义函数 fastclick.js插件
王敬辉的博客
06-05 398
click延时解决方案 移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)，页面。 解决方案： 1.禁用缩放。浏览器禁用默认的双击缩放行为 并且去掉300ms的点击延迟。 <meta name="viewport" content="user-scalable=no"> 2.利用touch事件自己封装这个事件解决300ms延迟。 原理： 当手指触摸屏幕时，记录当前触摸时间 当手指离开屏幕时，用离开的时间减去触摸的时间 如果小于150
移动端中click事件300ms延时问题解决方案
caidezhi123456的博客
05-28 1607
在解决这个问题我们先了解一下为什么会延迟300ms 在我们使用移动app时我们都会用两个手指捏和扩张，来缩小或者放大页面，之后我们会双击屏幕来恢复初始页面 这时候就会触发
【移动端H5】click事件和touch事件的区分
最新发布
weixin_57208584的博客
08-17 424
touch事件是移动端区别于pc端触控的独有事件，也是实现很多手势的基础事件。它具体包含了：touchstart（触摸开始时触发）、touchmove（触摸并产生移动时触发）、touchend（触摸结束时触发）等一系列事件。
touchend与click顺序
weixin_34235371的博客
10-02 180
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...
移动端——页面点击（ touchend -> click）
diaocheng9093的博客
07-04 743
手机端页面好多要注意的，点击事件就是其中一个： 在手机端页面中使用 click，安卓手机能正常实现点击效果，可是苹果手机不能点击；用 touchend 代替 click，苹果手机中能点击，但是可能出现小问题。 所以，在进行移动端页面优化时，一般使用 touch 事件替代鼠标相关事件，用的较多的是使用 touchend 事件替代PC端的 click 和 mouseup 事件。 注：在...
ios 用touchend事件 pc用click touchend击穿
weixin_33725239的博客
01-05 310
var clickEvent = (function() { if ('ontouchend' in document.documentElement === true) return 'touchend'; else return 'click';})(); 击穿 用延迟300秒隐藏 $('.tip_page').fadeOut(300,function(){　　xxxxxxxxx ...
HarmonyOS（二十四）——Harmonyos通用事件之触摸事件
hirezy
06-05 686
触摸事件就是当手指在组件上按下、滑动、抬起时触发的事件。
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4245
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
jQuery基于$.ajax设置移动端click超时处理方法
01-19
click｛mousedown->mousemove->mouseup｝ click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把click事件换成touchstart事件的话，就可能造成延时导致交互上也慢了几拍 所以在移动端最好把c
Zepto.js移动端左右滑动导航菜单.zip
05-24
这主要是通过模拟触摸事件来实现的，例如监听`mousedown`、`mousemove`和`mouseup`事件，以达到类似的效果。 在实际开发中，为了优化性能，你可能还需要考虑一些额外的因素，比如使用硬件加速，避免在滑动过程中重...
移动端touch事件执行顺序
weixin_43276017的博客
07-13 498
touchstart->touchmove（可无）->touchend->click 如果不想触发click事件可在touchend中阻止默认事件发生 event.preventDefault(); 如发现touch时没触发click事件，请检查是否阻止了默认事件
移动前端—touch事件与click事件的区别
qq_35043757的博客
11-28 2740
一·: 300毫秒的道德规范         移动设备访问的Web页面都是pc上的页面。在默认的viewpoint（980px）的页面往往都是需要“双击”或“捏开”放大来看清页面。正是为了确认确认用户是“单击”还是“双击”。Safari用300ms延迟来判断，而后来的iPhone，Android也用这种方式来判断，因此移动页面的click反应比PC端的慢上300毫秒。         为了解决
touch事件 以及 点击穿透的三种解决方法(移动端)
weixin_46022934的博客
11-14 5242
移动端 touch事件以及touch事件点击穿透的解决方法 提示： touchstart—>touchmove—>touchend ----> click 上面的四种点击都可以在移动端进行使用!但是有明确的区别! 移动端:touchstart — touchmove — touchend ,三个事件是专门为移动端监测,触摸开始(按下),触摸移动,触摸结束(离开),三个事件. 文章目录移动端 touch事件以及touch事件点击穿透的解决方法前言一、touch事件1.touchstart-
HTML5触摸事件(touchstart、touchmove和touchend)
热门推荐
一生为追梦的博客
01-15 1万+
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 　　一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
weixin_34297300的博客
08-08 1475
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例 一、 分享到： 前面我们介绍过移动设备中一些设备事件，例如手机旋转90度、倾斜等设置放置姿态变化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件...
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
04-09 1258
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。 做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。 之后百度了一下这个问题，原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致tou...
<template> <div class="container"> <div class="button" ref="buttonRef" :style="buttonStyle" @mousedown="startDrag" @touchstart="startDrag" > Button </div> </div> </template> <script> export default { data() { return { buttonIndex: 0, isDragging: false, initialPosition: { x: 0, y: 0 }, currentPosition: { x: 0, y: 0 } }; }, computed: { buttonStyle() { return { transform: `translate(${this.currentPosition.x}px, ${this.currentPosition.y}px)` }; } }, methods: { moveButton() { this.buttonIndex = Math.floor(Math.random() * 24); }, startDrag(event) { event.preventDefault(); // 计算初始位置 const boundingRect = this.$refs.buttonRef.getBoundingClientRect(); this.initialPosition = { x: event.clientX || event.touches[0].clientX, y: event.clientY || event.touches[0].clientY }; // 更新当前位置 this.currentPosition = { x: boundingRect.left, y: boundingRect.top }; // 监听移动和释放事件 window.addEventListener('mousemove', this.handleDrag); window.addEventListener('touchmove', this.handleDrag, { passive: false }); window.addEventListener('mouseup', this.stopDrag); window.addEventListener('touchend', this.stopDrag); }, handleDrag(event) { event.preventDefault(); // 计算移动距离 const clientX = event.clientX || event.touches[0].clientX; const clientY = event.clientY || event.touches[0].clientY; const deltaX = clientX - this.initialPosition.x; const deltaY = clientY - this.initialPosition.y; // 更新当前位置 this.currentPosition = { x: this.currentPosition.x + deltaX, y: this.currentPosition.y + deltaY }; }, stopDrag() { // 停止拖动，移除事件监听器 window.removeEventListener('mousemove', this.handleDrag); window.removeEventListener('touchmove', this.handleDrag); window.removeEventListener('mouseup', this.stopDrag); window.removeEventListener('touchend', this.stopDrag); } } }; </script> <style> .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .button { width: 80px; height: 40px; background-color: #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; } </style> 执行时出现了以下错误[Vue warn]: Error in v-on handler: "TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function" (found at pages/Dragging/Dragging.vue:1) 22:21:10.359 TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function怎么改正
07-12
这个错误是因为`getBoundingClientRect()`方法不适用于Vue组件的ref属性。要解决这个问题，你可以使用`$el`来访问DOM元素并调用`getBoundingClientRect()`方法。修改代码如下： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值