vue 移动端 触摸事件

最新推荐文章于 2024-06-27 14:56:52 发布
最新推荐文章于 2024-06-27 14:56:52 发布
阅读量994 收藏 3
点赞数
文章标签： 指针 js java vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122066563
版权
本文介绍了在Vue移动端开发中如何使用触摸事件，包括`touchstart`、`touchmove`、`touchend`和`touchcancel`。通过示例展示了如何实现一个可拖动的小球，点击和触摸移动时小球相应移动。详细解析了触摸事件的特性，如事件冒泡、可取消性以及`touches`、`targetTouches`和`changedTouches`等关键属性。
摘要由CSDN通过智能技术生成

原文链接: vue 移动端 触摸事件

上一篇: vue 一次失败的dom游戏制作

下一篇: grid 布局模拟游戏面板

实现一个可以拖动的小球

点击时小球会移动到点击的位置

触摸移动时小球会跟着移动

touchstart事件 ：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件 ：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件 ：当手指从屏幕上离开的时候触发。

touchcancel事件 ：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中

最低0.47元/天 解锁文章
阿豪boy
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在vue中使用触摸事件
一个在离前端越来越远的前端人员
11-19 1万+
为何用到了touch事件 在项目中，用mint-ui做了一个下拉刷新的功能。在其他手机都可以，但是在iphonex上当下拉到虚拟键位置，下拉框就会卡住，不会回弹。所以为了不让用户下拉到虚拟键设置了下拉高度和回弹的最大距离，用到了touch事件。 touch事件 最基本的touch事件有四个： touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 t...
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
vue自定义移动端touch事件，点击、滑动、长按事件.将以上代码保存到一个js文件内，引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
Vue3触摸屏滑动事件（touch, swipe）使用注意事项
最新发布
qiuzen的博客
06-27 497
使用方法如下，有些特殊的情况下需要加一个disable_touch的开关来阻止swipe和press事件的发生。安装npm包：npm i vue3-touch-events。
Vue 移动端的长按与触摸事件
归子莫的博客
08-12 1063
Vue 移动端的长按与触摸事件 文章目录Vue 移动端的长按与触摸事件说明实现代码演示优化体验 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 说明 在手机端的需求难免会遇到与手势相关的，比如div的长按和单击事件，长按可能是分享或者删除等操作，一般的形式是通过弹窗来展现。 实现 其实主要是利用dom的触摸事件，touchstart，touchmove，touchend 代码 <template> <div&
【Vue】vue移动端实现触摸事件（v-touch）的使用
weixin_62374100的博客
08-07 703
安装 npm install vue-touch@next -S main.js引入 1、import VueTouch from 'vue-touch' 2、Vue.use(VueTouch, {name: 'v-touch'}) // 组件内 <template> <v-touch v-on:swipeup="swiperup" v-on:swipedown="sw...
Vue长按触摸事件
c_5537484的博客
04-17 1254
开始触摸： @touchstart="touchClose()" 触摸结束： @touchend="touchOpen()"
vue自定义移动端touch事件之点击、滑动、长按事件
08-27
在移动端开发中，Touch事件是非常重要的一部分，我们经常需要监听用户的触摸操作，如点击、滑动、长按等。Vue框架提供了多种方式来处理Touch事件，但是在实际开发中，我们往往需要自定义Touch事件来满足特定的需求。...
vue移动端实现下拉刷新
08-27
在Vue移动端应用中，实现下拉刷新功能是一个常见的需求，特别是在构建可滚动列表或内容区域时。本篇文章将深入探讨如何使用Vue实现这一功能，并通过实际的代码示例帮助你理解其工作原理。 首先，我们需要了解移动端...
vue 移动端 地址选择 字母排序
01-02
在开发Vue移动端应用时，经常会遇到需要实现地址选择器的需求，尤其在电商类项目中，一个功能完善的地址选择器能够极大地提升用户体验。本项目标题提到的"vue 移动端 地址选择 字母排序"，就是针对这一需求的具体...
vue-video:vue移动端简单自定义控件播放器
05-13
这些控件通常需要响应触摸事件，确保在手机和平板上的操作流畅。Vue的事件绑定机制（`v-on`或`:click`）使得添加这些交互非常容易。 4. **视频流处理**：对于大文件或者网络条件较差的情况，可以使用视频流技术，如...
vue-touch-events:支持简单的触摸事件（点击滑动触摸保持）
04-28
提示触摸事件 启用vue.js 2.x的点击/滑动/触摸保持事件 特征： 常见的触摸事件，例如tap ， swipe ， touchhold （） 所有事件同时支持鼠标和触摸屏 使用touchClass选项和v-touch-class指令优化了触摸效果 在一个DOM元素上绑定多个触摸事件 可自定义的事件（可能带有本机事件） 允许通过v-touch-options指令拆分不同DOM元素的配置 可以自定义指令名称以避免名称空间冲突 这仅适用于vue.js 2.x 安装 要使用npm或yarn进行安装，请使用 npm i -S vue2-touch-events // or yarn add vue2-touch-events 用法 import Vue from 'vue' import Vue2TouchEvents from 'vue2-touch-events' Vue . us
vue3-touch-events:对vue.js 3的简单触摸事件支持
05-12
vue3-touch-events 在vue.js 3.x中的任何HTML DOM元素上启用点击，滑动，触摸，按住，鼠标按下，鼠标向上事件。 使交互式vue.js内容易于移动的最简单方法。 将v-touch事件添加到元素时，它会使用完全声明性的语法在台式机和移动设备上运行。 与其他库不同，您无需在组件中添加任何特殊代码即可完成此工作。 您只需要全局注册库，它就可以在整个应用程序中启用新事件。 根据许可的MIT许可证发布。 特征： 常见触摸事件的声明性语法，例如tap ， swipe ， hold ， drag和 所有事件均以相同的语法支持台式机（鼠标）和移动设备（触摸屏） 使用v-touch-class指令在悬停时自动添加样式并点击 在一个DOM元素上绑定多个触摸事件 使用类似于本机的事件处理程序的可自定义事件 节流的drag和rollover事件，以避免崩溃您的应用程序 适用
Vue项目监听touch事件实现移动端滑动
qq_38958099的博客
09-24 1284
由于该页面实际使用场景在移动端触摸屏，电脑端监听鼠标事件（mouseout、mouseup等）或者拖动事件（dragstart、dragend等）实现的方式在触摸屏上不可用，需要监听touch相关事件（touchstart、touchend）touchstart事件的入参是TouchEvent对象，该对象包含多个参数，其中touchstart事件的触点信息位于TouchEvent对象下的touches数组中，获取touchstart事件发生时触点在Y轴方向位置信息的代码如下。首先在元素上绑定事件监听函数。
vue移动端touch事件
杨葱儿
07-10 1981
开始事件：@touchstart 移动事件： @touchmove 结束事件： @touchend // 获取事件对象 @touchend="touchend($event)"
Vue html组件中常用鼠标 触屏事件
weixin_46258925的博客
03-17 1654
1.鼠标事件 1. @mouseleave:鼠标离开组件会触发事件，不会冒泡 2. @mouseout:鼠标离开组件或者子组件会触发事件，会冒泡 3. @mouseenter:鼠标进入组件时触发事件，不会冒泡 4. @mouseover:鼠标进如组件时出发事件，会冒泡 区别: mouseleave把组件当成整体，离开这个整体才会触发，离开子组件不触发(不冒泡) mouseout即使是离开组件的子组件也会触发(冒泡) mouseenter 与 mouseover 区别同上(进入) 2.触摸事件
Vue移动端触滑事件
qq_38948398的博客
08-31 2071
import Vue from 'vue' /* 声明构造函数 */ function vueTouch(el, binding, type) {//触屏函数 var _ = this; _.obj = el; _.binding = binding; _.touchType = type; _.vueTouches = { x: 0, y: 0 };//...
vue 多点触控手势_移动端手势事件（多指操作）
weixin_39839162的博客
12-18 1810
在移动端开发中，现有的手势事件只有IOS上的浏览器支持，因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart、toucmove、touchend事件上进行改造升级，下面就介绍下升级改造的移动端的手势事件。移动端触摸事件(基础事件)touchstart— 触摸开始touchmove— 触摸移动touchend— 触摸结束touchcancel— 触摸中断(在触摸过程中被打断，如弹框...
vue h5手机端 图片随意拖拽触摸事件
maoyuanh的博客
02-15 723
vue h5手机端 图片随意拖拽并且不超过页面范围，touch事件不影响点击事件，区分开
vue 移动端长按事件
08-24
在Vue中，可以使用`@touchstart`、`@touchmove`和`@touchend`这些事件绑定指令来监听移动端的触摸事件。引用中的代码展示了一个Vue组件中处理长按事件的示例代码。 首先，在模板中，可以在需要触发长按事件的元素上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值