【JavaScript-移动端常用事件】了解移动端touch触摸事件
目录
前言
1.触摸事件
2.触屏事件
3.TouchEvent触摸事件对象
4.拖动元素
写在最后
前言
移动端浏览器兼容性较好，不需要考虑JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) ， Android和IOS都有。
1.触摸事件
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
<body><div></div><script>var div = document.querySelector('div');// 手指触摸DOM事件div.addEventListener('touchstart', function () {console.log('别摸我！');})// 手指触摸滑动DOM事件div.addEventListener('touchmove', function () {console.log('我继续摸');})// 手指触摸离开DOM事件div.addEventListener('touchend', function () {console.log('我摸够了');})</script>
2.触屏事件
TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
因为平时我们都是给元素注册触摸事件,所以常用targetTocuhes
3.TouchEvent触摸事件对象
touches 正在触摸屏幕的所有于指的列衣，targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个DOM元素，他们两个是一样的，changedTouches 手指状态发生了改变的列表从无到有或者从有到无
4.拖动元素
1.touchstart，touchmove，touchend 可以实现拖动元素
2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0] 里面的pageX和pageY
3.拖动的原理:手指移动计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离
4.手指移动的距离 = 手指滑动中的位置 - 手指刚开始触摸的位置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {margin: 0;padding: 0;}div {position: absolute;left: 0;width: 100px;height: 100px;background-color: plum;}</style>
</head><body><div></div><script>var div = document.querySelector('div');// 获取手指初始坐标和盒子的原来位置var startX = 0;var startY = 0;// 获取盒子原来的位置var x = 0;var y = 0;div.addEventListener('touchstart', function (e) {// 得到初始的手指坐标startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;// 获取盒子坐标x = this.offsetLeft;y = this.offsetTop;})div.addEventListener('touchmove', function (e) {// 手指的移动距离= 手指移动之后的坐标 - 手指初始的坐标var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;// 移动盒子，盒子原来的位置+手指移动的距离this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';// 阻止屏幕滚动行为e.preventDefault();})</script>
</body></html>
我是Aic山鱼，感谢您的支持
原 创 不 易 ✨还希望支持一下
点赞【JavaScript-移动端常用事件】了解移动端touch触摸事件相关推荐
- html5触摸事件判断滑动方向,H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
- html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- touch触摸事件以及常用触摸功能
文章目录 前言 一.触摸事件 二. 事件对象 event 三. 功能案例 1. 检测滑动方向 2. 实现元素拖拽 3. 实现元素旋转 总结 前言 为了给基于触摸的用户界面提供高质量的支持,触摸事件提供 ...
- JS事件监听手机屏幕触摸事件 Touch
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- Android 触摸事件机制(三) View中触摸事件详解
本文将对View中触摸事件相关的内容进行介绍.重点介绍的是dispatchTouchEvent(), onTouchEvent()这两个API以及OnTouchListener接口. 注意:本文是基于 ...
- Cocos2d-x处理Touch触摸事件Demo
请参考<Ubuntu18.04搭建Cocos2d开发环境>搭建项目 默认情况下,Cocos2d-x会将鼠标左点击当作触摸. 第一步:在/home/kyun/Desktop/Games/My ...
- web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
- HTML5滑动(swipe)事件,移动端触摸（touch）事件
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touc ...
- js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件 常见触屏事件: 触屏touch事件 说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
- h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
最新文章
- linux常用命令大全(转)
- QT. 学习之路 一
- 解密万亿参数M6模型预训练背后的分布式框架Whale
- CA0503:无法显示额外的代码分析警告或错误
- 数据库笔记11：创建与管理存储过程
- 使用J-LINK烧写MICRO2440的NOR
- JS助记 ----- 正则表达式
- 官网下载keil MDK最新版本、历史版本和芯片pack包
- vba mysql 80004005_80004005错误,求高手指点,急,谢谢!
- linux查看隐藏大文件夹,Linux系统隐藏文件/文件夹操作教程
- 记将title（复杂字符串）放入URL时遇到的一些问题（`Model has no value for key ‘[‘`；重定向；中文乱码；URLEncoder；正则替换）
- 文件上载限制4gb_新get!百度网盘破除上传单个文件超4GB限制
- qt5的qk2dview
- 索尼的hlg是什么_索尼的便捷HLG流程，到底有多便捷？
- struts2 体系结构
- spice仿真模型导入multisim注意事项
- 超详细：PMP项目管理之架构、团队、人
- vue给标签动态绑定title
- Linux如何开启Telnet服务
- 银行交换机服务器维护,某银行客户使用第三方网管纳管华为S7706交换机后网管时断时续的问题...
热门文章