移动端首先要书写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>
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
