移动端事件touchstart touchmove touchend 动画事件 过渡事件
2024-06-06 18:32:16
在移动端新增了touch事件，因为手指的行为叫做“触摸”， 鼠标的行为叫做“点击”
但是它仍然支持点击事件，有300ms的延迟，检测是否双击
移动端的三个事件
touchstart：触摸开始
绑定方式：
dom.addEventListener(“touchstart”, fn)
touchmove: 触摸移动
绑定方式：
dom.addEventListener(“touchmove”, fn)
touchend: 触摸结束
绑定方式:
dom.addEventListener(“touchend”, fn)
事件对象
在touchstart和touchmove事件中获取手指相关信息的属性: e.touches
// 获取元素
var box = document.getElementById("box");
// 为box注册touchstart事件
box.addEventListener("touchstart", function(e) {console.log(e);// 在touchstart事件获取手指相关信息的属性: e.touchesconsole.log(e.touches[0].clientX);console.log(e.touches[0].clientY);
})// 注册touchmove事件
box.addEventListener("touchmove", function(e) {// 在touchmove事件中，获取手指相关信息的属性: e.touchesconsole.log(e.touches[0].clientX);console.log(e.touches[0].clientY);
})在touchend事件中获取手指信息的相关属性叫做: e.changedTouches
// 注册touchend事件
box.addEventListener("touchend", function(e) {// 在touchend事件中获取手指相关信息的属性: e.changedTouchesconsole.log(e.changedTouches[0].clientX);console.log(e.changedTouches[0].clientY);
})动画事件和过度事件
当一个元素过度完成之后会触发一个事件: transitionend事件
<style type="text/css">* {margin: 0;padding: 0;}#box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;top: 0;transition: all 1s;}#box.cur {left: 100px;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");// 两秒之后添加类名
setTimeout(function() {box.setAttribute("class", "cur");
}, 2000)// 当一个元素过度完成之后会触发一个事件
box.addEventListener("transitionend", function() {console.log("过度完成");
})动画事件
当一个元素动画开始的时候会触发一个事件: animationstart
#box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;top: 0;/*动画的调用*/animation: donghua 1s ease 2s 3 alternate;}/*动画的定义*/@keyframes donghua {from {left: 0;}to {left: 100px;}}// 获取元素
var box = document.getElementById("box");// 动画开始事件
box.addEventListener("animationstart", function() {console.log("动画开始");
})当一个元素动画结束之后会触发一个事件: animationend事件
#box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;top: 0;/*动画的调用*/animation: donghua 1s ease 2s 3 alternate;}/*动画的定义*/@keyframes donghua {from {left: 0;}to {left: 100px;}}// 动画结束事件
box.addEventListener("animationend", function() {console.log("动画结束");
})touchstart touchmove touchend 实现轮播图
<div class="banner" id="banner"><ul id="carousel"><li><img src="data:images/banner0.jpg" alt="" /></li><li><img src="data:images/banner1.jpg" alt="" /></li><li><img src="data:images/banner2.jpg" alt="" /></li><li><img src="data:images/banner3.jpg" alt="" /></li><li><img src="data:images/banner4.jpg" alt="" /></li><li><img src="data:images/banner0.jpg" alt="" /></li></ul></div>css
/*头部部分完成*/
.banner {position: relative;max-width: 540px;min-width: 320px;height: 107px;width: 100%;margin: 0 auto;overflow: hidden;/*background: url(../images/banner.jpg) no-repeat;*//*background-size: 100% 100%;*/
}/*滚动轮播图的布局关键: ul的宽度要足够的宽，所有的图片要并排在一起*/
.banner #carousel {position: absolute;width: 600%;height: 100%;left: 0;top: 0;
}.banner #carousel li {float: left;width: 16.66%;
}.banner #carousel li img {width: 100%;height: 100%;
}#carousel {transition: all 1s;}<script type="text/javascript">/* 实现轮播图banner 的高度自适应 */// 获取元素var banner = document.getElementById("banner");// 计算图片的比例 图片大小宽高var r = 768 / 154;// 获取当前视口的宽var width = document.documentElement.clientWidth;// console.log(width);// 计算比例var height = width / r;// console.log(height);// 赋值给bannerbanner.style.height = height + "px";/* 轮播图动画效果 */var carousel = document.getElementById("carousel");var length = carousel.getElementsByTagName("li").length - 1;// 定义信号量var idx = 0;// 定义中转量var left = 0;// 定义锁 函数节流var lock = true;// 为carousel注册touchstart事件carousel.addEventListener("touchstart", function(e) {// 函数节流 防止用户频繁首次滑动if (!lock) {return;}// 在touchstart事件中取消过度 首次滑动屏幕先把过渡取消掉this.style.transition = "none";// 获取手指首次触摸屏幕相关的信息left = e.touches[0].clientX;})// 为了让图片跟随手指移动为carousel去注册touchmove事件carousel.addEventListener("touchmove", function(e) {// 函数节流 防止用户频繁滑动if (!lock) {return;}// 获取手指移动时候的位置var x = e.touches[0].clientX;// 当idx===0并且还是往右滑动，此时应该显示最后一张图片if (idx === 0 && x > left) {// 改变carousel的定位left值carousel.style.left = -width * length + x - left + "px";return;}// 改变carousel的定位值 让图片开始滑动到指定的位置carousel.style.left = -width * idx + x - left + "px";})// 为carousel注册touchend事件 手指离开屏幕的事件carousel.addEventListener("touchend", function(e) {// 函数节流if (!lock) {return;}// 把锁关闭 lock = false;// 在手指离开屏幕的时候要加上过度this.style.transition = "all 1s";// 获取手指离开之后的位置var x = e.changedTouches[0].clientX;// 判断手指滑动的方向if (x > left) {// 说明是往右滑动，图片应该从左侧出现，相当于左按钮点击事件// 左按钮点击事件的策略: 先验证， 再拉动// 改变信号量idx--;// 验证if (idx < 0) {idx = length - 1;}} else if (x < left) {// 说明往左滑动，图片应该从右侧出现，相当于右按钮点击事件// 右按钮点击事件的策略: 先拉动， 再验证// 改变信号量idx++;// 边界判断}// 拉动carousel.style.left = -width * idx + "px";})// 给carousel注册过度完成事件carousel.addEventListener("transitionend", function() {if (idx > length - 1) {// 取消过度carousel.style.transition = "none";idx = 0;carousel.style.left = -width * idx + "px";}console.log("过渡完成")// 开锁lock = true;})</script>移动端事件touchstart touchmove touchend 动画事件 过渡事件相关推荐
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
- 移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
- 移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件 手势事件 传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
- 关于touch事件的使用 （touchStart touchMove touchEnd（不触发 android 4.0以上）） 滑动的使用
最近在移动端使用touch事件的时候,遇到了一些问题 ,下面是一些心得, 手机端经常会有有一些上拉加载,下拉刷新, 左右滑动删除的应用场景, 在不借助第三方插件的时候,无疑会用到touch事件,在谷歌 ...
- touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
- Vue 绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件,简单学习后实现如下: 先看代码: <template><div><div class="test" @touch ...
- touchstart ,touchmove, touchend 页面随手指滑动
<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><s ...
- 移动端开发touchstart，touchmove，touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个"服务商管理"页面使用到了触摸事件"touchstart& ...
最新文章
- JavaWeb基础—JSP
- python使用matplotlib可视化、使用matplotlib可视化scipy.misc图像、自定义使用RdYIBu色彩映射、将不同亮度映射到不同的色彩
- Docker映像和容器之间有什么区别？
- [安卓基础] 006.打开另一个Activity
- angular2集成highchart
- 水果电池打造柠檬电动汽车!
- My Opportunity应用点击Edit后出现time out的错误分析
- PythonGuru 中文系列教程·翻译完成
- java io-File
- 点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)
- json接口(使用，以及自定义)
- 二叉树 java泛型_java二叉树
- 初中英语语法(002)-be动词和一般动词的一般现在时
- 人文视野中的生态学题库
- imap能和服务器同步文件夹吗,IMAP 同步
- Facebook攻略--注册流程
- Wise Disk Cleaner 免费的磁盘清理和磁盘碎片整理工具
- 恭喜马斯克、纳德拉当选美国工程院院士，张宏江、方岱宁入选外籍院士
- 网易换肤第一篇：换肤技术解密！
- 一道逻辑推理题的程序实现（纯属娱乐）