移动端 touch事件过渡事件动画事件

移动端首先要书写meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

移动端touch事件和鼠标点击事件

移动端的事件是新增的，touch事件也叫触摸事件。因为手指的行为叫触摸。鼠标的行为叫点击。

鼠标的点击事件依然支持，只是有300ms的延迟。

为什么要有300ms的延迟，为了检测是否是双击。

当绑定了onclick 和 touchstart事件的时候，首先是touchstart事件先触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- meta标签比较特殊， 它的功能很多， 所以需要两个属性， name、 content属性， name属性是规定meta标签起到了什么作用， content是描述name属性的具体作用 --><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><style type="text/css">* {margin: 0;padding: 0;}#container {width: 100%;height: 40px;background-color: red;}</style>
</head>
<body><div id="container">你好</div><script type="text/javascript">// 我们要点击div让文字颜色改变为白色，// 在pc端我们首先想到，给元素添加onclick事件，// 获取元素// 获取当前事件var date = new Date();var div = document.getElementById("container");// 添加onclick事件div.onclick = function() {// 文字变白console.log("点击事件：我的颜色要变白了")this.style.color = "white";console.log(new Date() - date);}// 触摸事件div.addEventListener("touchstart", function() {// 文字颜色变为蓝色this.style.color = "blue";console.log("touch事件：我的颜色要变白了")console.log(new Date() - date);}, false)// 总结： 当绑定了onclick 和 touchstart事件的时候， 首先是touchstart事件先触发，</script>
</body>
</html>

移动端touch事件

touchstart（）触摸开始事件

touchmove（）触摸移动事件

touchend（）触摸结束事件

注：touch事件需要用DOM2级进行事件绑定，DOM1级事件绑定不上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><style type="text/css">* {margin: 0;padding: 0;}#box {width: 100%;height: 100px;background-color: red;}</style>
</head>
<body><div id="box"></div><script type="text/javascript">// 获取元素var box = document.getElementById("box");touch事件需要用dom2级事件绑定 dom1级绑定不上// box.touchstart = function () {//     console.log("dom1级触摸");// }// 添加触摸事件box.addEventListener("touchstart", function() {console.log("触摸开始")})// 添加移动事件box.addEventListener("touchmove", function() {console.log("触摸中……")})// 添加结束事件box.addEventListener("touchend", function() {console.log("触摸结束")})</script>
</body>
</html>

touch事件的事件对象event

touchstart 和 touchmove 可以通过event.thouches 来获取手指信息

touchend事件不能通过event.thouches来获取手指信息，是因为此时手指已经离开了屏幕，所以要通过event.changedTouches来获取手指的信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><style type="text/css">* {margin: 0;padding: 0;}#box {width: 100%;height: 100px;background-color: red;}</style>
</head>
<body><div id="box"></div><script type="text/javascript">// 获取元素var box = document.getElementById("box");// 添加触摸事件box.addEventListener("touchstart", function(e) {       // 想要获取手指信息console.log("触摸开始")console.log(e)console.log("触摸时候的手指x坐标是： " +e.touches[0].clientX)console.log("触摸时候的手指y坐标是： " +e.touches[0].clientY)})// 添加移动事件box.addEventListener("touchmove", function(e) {console.log("触摸中……");console.log(e)console.log("触摸时候的手指x坐标是： " +e.touches[0].clientX)console.log("触摸时候的手指y坐标是： " +e.touches[0].clientY)})// 添加结束事件box.addEventListener("touchend", function(e) {console.log("触摸结束");//e.touches[0].clientX获取不到手指信息// console.log("触摸结束时候的手指x坐标是： " + e.touches[0].clientX)console.log(e)// console.log(e.changedTouches[0].clientX)console.log("触摸结束时候的手指x坐标是： " + e.changedTouches[0].clientX)console.log("触摸结束时候的手指y坐标是： " + e.changedTouches[0].clientY)})</script>
</body>
</html>

过渡事件和动画事件

当一个元素过渡开始时候，不会执行transionstart 事件，过渡开始没有transionstart 事件

当一个元素过渡完成时候，会执行transionend 事件

当一个元素动画开始的时候，会触发animationstart 事件

当一个元素动画结束的时候，会触发animationend 事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}#box {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: red;transition: all 1s ease 0s;}#box.cur {left: 100px;}#box1 {position: absolute;top: 100px;left: 0;width: 100px;height: 100px;background-color: blue;/* animation: go 1s ease 1s 3 alternate; */}/*定义动画*/@keyframes go {form {left: 0px;}to {left: 100px;}}</style>
</head>
<body><div id="box"></div><div id="box1"></div><script type="text/javascript">// 获取元素var box = document.getElementById("box");var box1 = document.getElementById("box1");// 1s之后，让box添加过度效果setTimeout(function() {box.setAttribute("class", "cur");}, 1000)// 过渡事件box.addEventListener("transitionend", function() {console.log("过渡完成")})// 过渡事件没有开始事件box.addEventListener("transitionstart", function() {console.log("过渡开始")})// 动画开始事件box1.addEventListener("animationstart", function() {console.log("动画开始")})// 动画结束事件box1.addEventListener("animationend", function() {console.log("动画结束")})</script>
</body>
</html>

移动端 touch事件过渡事件动画事件相关推荐

移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
【JS教程】移动端 Touch（触摸）事件
一.pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有那么好用,虽然部分仍然可以使用. 1. click事件 ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
移动端前端常见的触摸相关事件touch、tap、swipe
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
原生js实现移动端touch事件，解决穿透问题
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...

移动端 touch事件过渡事件动画事件

移动端 touch事件过渡事件动画事件相关推荐

最新文章

热门文章

移动端 touch事件 过渡事件 动画事件

移动端 touch事件 过渡事件 动画事件相关推荐

最新文章

热门文章

移动端 touch事件过渡事件动画事件

移动端 touch事件过渡事件动画事件相关推荐