vue中touchEnd事件和touchStart、touchMove获取坐标不一样

最新推荐文章于 2023-02-15 15:03:10 发布
原创 最新推荐文章于 2023-02-15 15:03:10 发布 · 1.1w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#touch事件

本文详细解析了touchEnd、touchStart及touchMove三种触摸事件的区别与应用，重点介绍了如何通过e.targetTouches[0].pageY获取touchEnd事件的垂直位置，通过e.changedTouches[0].pageY获取touchStart和touchMove事件的垂直位置。

touchEnd    ~~~~~~~~~~~~~~~~   e.targetTouches[0].pageY

touchStart    ~~~~~~~~~~~~~~~~   e.changedTouches[0].pageY

touchMove    ~~~~~~~~~~~~~~~~   e.changedTouches[0].pageY

 

移动端开发touchstart，touchmove，touchend事件详解使用
m0_38109616的博客
03-28 4445
页面使用到了触摸事件"touchstart"，“touchmove”，“touchend”。需求：当你手指接触到屏幕并向左滑动时，被滑动的服务商信息开始向左滑动同时出现"编辑"和"停用"操作按钮。若继续用手指向右滑动，那么就会隐藏"编辑"和"停用"按钮，回到一开始的正常状态。下图展示了向左滑动和向右滑动产生的效果。 从一开始到左滑动完成： 从左滑动完成开始向右滑动知道完成。 触摸事件（touch Events） 　　　　touchstart,touchmove,touchend事件都有13个事件属
vue webapp滑动事件_浅谈移动端之touch事件--手指的滑动事件
weixin_34467247的博客
12-31 650
今天台风‘海马’袭击深圳，全市停工。现分享一篇关于touch的文章，望指教！原理：当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。具体代码如下：$("body").on("touchstart...
Vue中使用MouseMove事件 获取鼠标坐标频率降低或事件卡顿
weixin_34248849的博客
10-24 5505
当我们使用Vue进行项目开发时，因为Vue的简介和易用性使我们可能会忽略，Vue的生命周期这件事儿。 尤其是在使用事件时，稍有不意就会造成意外发生！ 本文章使用常见的拖拽为案例。 当拖拽一个div元素时，很明显会造成鼠标快速滑动时div跟随卡顿 共通代码： <script> export default { data() { retu...
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4610
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
vue获取鼠标位置
77的博客
01-15 6467
  可以监听以下事件 touchstart      鼠标点击时，触发该事件一次。 touchmove    当鼠标移动时，会多次调用该事件。 touchend       当鼠标停止移动时，触发该事件一次。 click               点击   可以用下面的方式获取 event.offsetX/event.offsetY 取不到尝试： // 获取x 坐标 e.target...
Vue 获取鼠标位置坐标
热门推荐
优快云前端知识共享
07-24 4万+
Vue 获取鼠标位置坐标 在Vue项目中，我们可能有获取鼠标信息的需求来处理业务逻辑。 介绍 下面，我们将通过介绍touch事件，来获取鼠标位置。 事件名 功能 touchstart 鼠标点击时，触发该事件一次。 touchmove 当鼠标移动时，会多次调用该事件。 touchend 当鼠标停止移动时，触发该事件一次。 templ...
获取touchstart,touchmove,touchend 坐标
weixin_33923762的博客
08-08 1220
简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值： jQuery 代码： $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id'...
HTML5触摸事件(touchstart、touchmove和touchend)的实现
11-20
以下是一个简单的示例，展示了如何使用`touchstart`和`touchend`事件来记录触摸的开始和结束位置： ```javascript function load() { document.addEventListener('touchstart', touch, false); document....
移动端touchmove事件边界touchend不触发
qjl_0805的博客
06-28 7489
做前端一年整，碰到不少问题，以前都是找资源，解决问题，不会去分享资源，这次是我第一次写博客，如果有什么问题，欢迎来交流。 在过去一年的时间里，我所接触的多有是移动端的项目，移动前端中，touch触摸事件经常会涉及到，轮播图，上拉加载，都要用到touch事件，有用过插件，也有自己写过一些事件。关于touch事件中关键的3个事件 touchstart, touchmove, touchend
vue中touch和click共存的解决方式
10-15
在手机设备上，用户通常通过触摸屏幕进行交互，这涉及到 `touch` 事件序列（`touchstart`、`touchmove` 和 `touchend`），而 `click` 事件则用于模拟桌面端的鼠标点击。然而，由于移动端浏览器的300毫秒延迟（为了...
解决vue的touchStart事件及click事件冲突问题
11-20
一 、问题： 今天遇到这样问题，给某个元素同时绑定touchStart及click事件后，若在移动设备上，当你点击时，会依次出发这两个事件。因为移动端设备上的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次，这样毫无意义。这里提醒下，PC是无法识别touch相关事件 二、解决方式 （1）preventDefault方法 通过使用preventDefault方法（阻止元素默认事件行为的发生）来解决。在touchstart中添加 e.preventDefault()就可以阻止click事件触发。 模板 <ul class
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
vue自定义移动端touch事件，点击、滑动、长按事件.将以上代码保存到一个js文件内，引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
JQuery获取touchstart,touchmove,touchend坐标
weixin_30546189的博客
09-13 153
$('#id').on('touchstart',function(e) { var x= e.originalEvent.targetTouches[0].pageX; }); JQuery如上。 document.getElementById("id").addEventListener("touchstart",function(e){...
js 判断手势_浅谈移动端之js touch事件 手势滑动事件
weixin_30182831的博客
12-23 771
这篇文章主要和大家聊一聊移动端之js touch事件，即手指的滑动事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下现分享一篇关于touch的文章，望指教！原理：当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在...
解决在canvas获取的坐标和窗口的坐标一样的问题
林大夏的专栏
12-01 1万+
点击获取canvas内的鼠标坐标位置
canvas绘制的线条位置错乱
weixin_46787337的博客
07-15 1345
canvas标签的宽高可以通过js的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果天差地别，Canvas的默认宽高是width150使用canvas标签一定要用js指定元素的宽高，不然就是bughttpshttps。...
Vue 绑定使用 touchstart touchmove touchend
Joey的博客
09-05 3万+
Vue 简单绑定 touchstart touchmove touchend
Vue 中 使用touchstart ，touchmove，touchend事件
m0_45043105的博客
11-22 4800
<template> <div id="SlideBar" class="box"> <div class="item" ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)"&gt...
和你刚刚的事例代码有点不一样 我的是vue项目 而且是在每个元素外层包了个div 在这个div里绑定了touchend touch start touchmove touchcancel
最新发布
09-05
在 Vue 项目中，为解决长按...在 `click` 事件和组件的 `click` 事件中检查 `isLongPress` 的值，如果为 `true` 则阻止跳转操作，并将 `isLongPress` 重置为 `false`，同时隐藏蒙层；否则执行正常的 `click` 跳转逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值