移动端touch触摸事件（滑动效果和手势操作）
一、定义
①touch是移动端的触摸事件，而且是一组事件，主要有以下事件：
- touchstart 事件：当手指触摸屏幕的时候触发
- touchmove 事件：当手指在屏幕来回滑动的时候触发
- touchend 事件：当手指离开屏幕的时候触发
- touchcancel事件：当被终止滑动的时候触发（来电、弹消息）
②利用touch相关事件可以实现移动端常见的滑动效果和移动端常见的手势事件，比较常用的事件主要是touchstart、touchmove、touchend，并且一般是使用addEventListener绑定事件
dom.addEventListener('touchstart',function(){
});
dom.addEventListener('touchmove',function(){
});
dom.addEventListener('touchend',function(){
});
二、使用
<!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>touch事件</title>
<style>
.body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;background: #ccc;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload=function(){
var box=document.querySelector('.box');
box.addEventListener('touchstart',function(){
console.log('start')
});
box.addEventListener('touchmove',function(){
console.log('move')
});
box.addEventListener('touchend',function(){
console.log('end')
});
}
</script>
</body>
</html>
三、事件对象event
四、分析移动端滑动实现的原理
①让触摸的元素随着手指的滑动做位置的改变
②位置的改变，需要当前的坐标，当前手指的坐标和移动后的坐标都可以在事件对象中拿到
<!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>touch事件</title>
<style>
.body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;background: #ccc;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload=function(){
var box=document.querySelector('.box');
box.addEventListener('touchstart',function(e){
console.log('开始坐标('+e.touches[0].clientX+','+e.touches[0].clientY+')');
});
box.addEventListener('touchmove',function(e){
console.log('移动的坐标('+e.touches[0].clientX+','+e.touches[0].clientY+')');
});
box.addEventListener('touchend',function(e){
console.log('结束的坐标不会记录');
});
}
</script>
</body>
</html>
五、移动端的手势事件（实现左滑手势和右滑手势的原理）
<!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>手势事件的实现</title>
<style>
.body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;background: #ccc;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload=function(){
// 封装手势的函数
var bindSwipeEvent=function(dom,rightCallback,leftCallback){
// 手势实现的条件:滑动并且滑动距离大于50px
var isMove=false;
var startX=0;
var distanceX=0;
dom.addEventListener('touchstart',function(e){
startX=e.touches[0].clientX;
});
dom.addEventListener('touchmove',function(e){
isMove=true;
var moveX=e.touches[0].clientX;
distanceX=moveX-startX;
});
dom.addEventListener('touchend',function(e){
// 滑动结束
if(isMove && Math.abs(distanceX)>50){
if(distanceX>0){
rightCallback && rightCallback.call(this,e);
}else{
leftCallback && leftCallback.call(this,e);
}
}
// 重置参数
isMove=false;
startX=0;
distanceX=0;
});
};
// 调用
bindSwipeEvent(document.querySelector('.box'),function(e){
console.log('左滑手势');
},function(e){
console.log('右滑手势');
})
}
</script>
</body>
</html>
移动端touch触摸事件（滑动效果和手势操作）的更多相关文章
- Touch事件 移动端touch触摸事件
<!-- HTML5 --> <!DOCTYPE html> <html> <head> <title>TouchEvent测试</t ...
- 移动端-js触摸事件
开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...
- 移动端touch触屏滑动事件、滑动触屏事件监听！
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- 移动端touch拖动事件和click事件冲突问题解决
通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准 ...
- 移动端 之 触摸事件、Tap事件和swipe事件
触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...
- touch触摸事件
事件对象 事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作 ...
- 移动端JS 触摸事件基础
一.手机上的触摸事件 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时触发 ...
- 移动端js触摸事件大全
一.手机上的触摸事件 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时触发 下面这 ...
- hammer.js触摸,手指缩放等许多手势操作
使用方法: 插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. <script src="http://e ...
随机推荐
- quartz与c3p0冲突
在SSM中使用连接池c3p0正常,引入quartz后发现后台报错 java.lang.AbstractMethodError: Method com/mchange/v2/c3p0/impl/NewP ...
- linux安装mysql后报错启动不了Starting MySQL. ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid).
今天安装完Mysql后,开启发生了错误: 2.打开错误信息文件,查看错误原因是:Plugin 'FEDERATED' is disabled. /usr/sbin/mysqld: Table 'mys ...
- WebRTC 入门教程（二）| WebRTC信令控制与STUN/TURN服务器搭建
WebRTC 入门教程(二)| WebRTC信令控制与STUN/TURN服务器搭建 四月 4, 2019 作者:李超,音视频技术专家.本文首发于 RTC 开发者社区,欢迎在社区留言与作者交流. htt ...
- python小作业
目录 1.简述变量命名规范 2.name = input(">>>") name变量是什么数据类型通过代码检测 3.if条件语句的基本结构? 4.用print打印 ...
- jquery datatable如何动态分页
展开全部 一.分页 分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果. 这里需要用到datatable插件的几个属性: &qu ...
- SAP成都研究院的小伙伴们庆祝公司再次获得2019年最佳雇主的场景
日前,怡安集团旗下全球领先的人力资本管理咨询机构怡安翰威特与全球高管寻聘和领导力顾问公司史宾沙旗下Kincentric共同揭晓2019年中国最佳雇主榜单.SAP中国研究院凭借企业的创新文化和多元环境, ...
- 学习操作系统和Linux内核的新体会
算起来是第三次看内核了吧,要从源码的细节中爬出来: (1)先拎清楚主要的数据结构,就把握住了骨架: (2)再看每个系统调用的功能的流程是如何围绕上述数据结构展开.举个栗子,块设备驱动层的主要数据结构有 ...
- VirtualBox下设置 XP虚拟机桥接模式
virtualBox下设置虚拟机桥接模式
- idea 启动项目报错，more than one fragment with the name [spring web] was found
这是由于idea导入项目的时候有多个模块,并且有多个web.xml导致的,先删除对应的模块,后启动即可. 另外也有可能是spring的jar冲突,把冲突的jar删除即可.
- Redis中如何发现并优化big key？
Redis中的大key一直是重点需要优化的对象,big key既占用比较多的内存,也可能占用比较多的网卡资源,造成redis阻塞,因此我们需要找到这些big key进行优化 一.寻找big key 通 ...