移動端 touch事件 過渡事件 動畫事件
阿新 • • 發佈：2019-02-15
移動端首先要書寫meta標籤
<meta type="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maxium-scale=1.0,minium-scale=1.0 />
<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>