vue 移动端 触摸事件
原文链接: vue 移动端 触摸事件
上一篇: vue 一次失败的dom游戏制作
下一篇: grid 布局模拟游戏面板
实现一个可以拖动的小球
点击时小球会移动到点击的位置
触摸移动时小球会跟着移动
touchstart事件 :当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件 :当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件 :当手指从屏幕上离开的时候触发。
touchcancel事件 :当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。
touches :表示当前跟踪的触摸操作的touch对象的数组。
targetTouches :特定于事件目标的Touch对象的数组。
changeTouches :表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX :触摸目标在视口中的x坐标。
clientY :触摸目标在视口中的y坐标。
identifier :标识触摸的唯一ID。
pageX :触摸目标在页面中的x坐标。
pageY :触摸目标在页面中的y坐标。
screenX :触摸目标在屏幕中的x坐标。
screenY :触摸目标在屏幕中的y坐标。
target :触目的DOM节点目标。
代码
<template><div class="main"@touchmove="touchmove"@touchstart="touchstart"@touchend="touchend"@touchcancel="touchcancel"><div class="ball"ref="ball"></div></div>
</template><script>import vconsole from 'vconsole'new vconsole()export default {name: "t1",methods: {touchmove(e) {console.log('move', e)this.$refs.ball.style.left = e.touches[0].clientX - 50 + 'px'this.$refs.ball.style.top = e.touches[0].clientY - 50 + 'px'},touchstart(e) {console.log('start', e)this.$refs.ball.style.left = e.touches[0].clientX - 50 + 'px'this.$refs.ball.style.top = e.touches[0].clientY - 50 + 'px'},touchend(e) {console.log('end', e)},touchcancel(e) {console.log('cancel', e)}}}
</script><style scoped>.main {width: 100vw;height: 100vh;background: deepskyblue;position: relative;}.ball {width: 100px;height: 100px;border-radius: 50%;position: absolute;left: 0;top: 0;background: gray;}
</style>
vue 移动端 触摸事件相关推荐
- h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 移动端触摸事件touchmove的坑
转载地址:http://www.mizuiren.com/452.html 一说到移动端触摸事件,大家的反应不就是touchstart,touchmove,touchend吗,相当于pc段的mouse ...
- 移动端触摸事件(touchstart,touchend,touchmove)的使用!
touchstart 开始触摸 touchmove 移动时触 touchmove 结束时触发 触摸事件有三个属性对象, touches对象 :表示当前触摸的手指个数,此对象中还包括集合 clientX ...
- 移动端触摸事件中touchstar、touchmove、touchend、touchcancel事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5移动端触摸事件
工作了近一个月了 因为公司是主要偏向于移动端,开始不懂移动端事件 一直用的click click在安卓端没有什么问题 但在IOS端就有问题了点击之后会延迟半秒 多亏旁边大神指点 原来 iOS上的 ...
- 关于移动端 触摸事件导致子元素不能绑定事件
近期项目遇到一个问题, 找了一个插件 叫做 移动端按首字母检索城市列表 http://www.sucaihuo.com/js/2305.html 在城市选项这里发现绑定不上事件 找了很多阻止冒泡的事件 ...
- vue移动端touch事件
开始事件是 @touchstart; 移动事件是 @touchmove; 结束事件是 @touchend; // 获取事件对象@touchend="touchend($event)" ...
- html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 前言 HTML中新添加了许多新的事件,但由于兼容性的问题,许多事件 ...
- vue 多点触控手势_移动端手势事件(多指操作)
在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart.toucmove.touchend事件上进行改造升级,下面就介绍下升级改 ...
最新文章
- 一文应用 AOP | 最全选型考量 + 边剖析经典开源库边实践,美滋滋
- 用D触发器构造边沿触发器
- qt 主动打开虚拟键盘_ipad键盘有用吗?
- 【渗透测试】一次从黑盒转向白盒
- IntelliJ IDEA 源值1.5已过时,将在未来所有版本中删除
- Java学习之String StringBuffer StringBuilder区别
- Android+clipse导入工程提示:invalid project description
- js隐藏打开项目隐藏编辑 和删除按钮
- 为U盘装备Ubuntu工作学习两不误
- 阶乘与 pi 的关系 —— 斯特林公式(Stirling formula)
- Java8 LocalDateTime和Date相互转换
- RACCommand
- 前端资源汇总-酷站分享[转载]
- ktv点歌系统服务器怎样连接,ktv设备与显示屏怎么连接
- 巧妙使用vscode绘制mindmap
- 基于LSTM-Attention模型的光伏电站发电量预估(1)
- python基础(中)
- CSS背景图片background如何改变大小以及样式设置
- hadoop个人总结
- Oracle:cost耗费高的sql执行比cost耗费慢的效率快
热门文章
- 如何解决“应用程序无法启动,因为应用程序的并行配置不正确“问题,请参阅应用程序事件日志,或使用命令行sxstrace.exe工具
- 苹果笔记本双系统怎么切换_2020年你该怎么选择苹果笔记本,资深用户带你讲透MacBook Air MacBook Pro...
- vxe-table【复杂导出】
- macOS高端使用技巧
- 跑步能戴耳机吗,五款适合跑步戴的耳机
- m基于matlab的TDSCDMA系统性能仿真
- fetch请求理解和用法
- [附源码]计算机毕业设计体育器材及场地管理系统Springboot程序
- Error injecting: org.apache.maven.plugin.surefire.SurefirePlugin
- python 获取列名_python获取Pandas列名的几种方法