移动端touch相关事件
2018-11-29 本文已影响0人
亨锅锅
- touchstart : 当手指触摸到指定元素时触发
- touchmove: 当手指在指定元素上移动时触发
- touchend: 当手指离开指定元素时触发
<script>
/*
注意点:
1.如果要添加移动端的touch相关的事件, 推荐使用addEventListener来添加
不推荐使用on来添加
2.如上的事件, 当前在PC端无效
*/
var oDiv = document.querySelector("div");
oDiv.addEventListener("touchstart", function () {
console.log("手指按下");
});
oDiv.addEventListener("touchmove", function () {
console.log("手指移动");
});
oDiv.addEventListener("touchend", function () {
console.log("手指离开");
});
</script>
点透现象
- 如果两个元素是重叠的(一个在另一个上面)
- 并且上面一个监听了touchstart事件, 下面一个监听了click事件
- 那么如果上面一个元素触发touchstart事件之后消失了, 那么就会出现点透问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>touch事件的点透问题</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
font-size: 40px;
text-align: center;
}
.click{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
width: 300px;
height: 300px;
background: red;
}
.tap{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 150px;
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="click">click</div>
<div class="tap">touch</div>
<script>
var oClick = document.querySelector(".click");
var oTap = document.querySelector(".tap");
oTap.addEventListener("touchstart", function () {
// 如果两个元素是重叠的(一个在另一个上面)
// 并且上面一个监听了touchstart事件, 下面一个监听了click事件
// 那么如果上面一个元素触发touchstart事件之后消失了, 那么就会出现点透问题
this.style.display = "none";
});
oClick.addEventListener("click", function () {
console.log("点透了");
});
</script>
</body>
</html>
- 点透现象的存在，造成了实际开发中，弹窗等内容消失后，下面的内容如果有点击事件，将会被意外触发，影响体验
fastclick的使用
https://github.com/ftlabs/fastclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>touch事件的点透问题解决</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
font-size: 40px;
text-align: center;
}
.click{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
width: 300px;
height: 300px;
background: red;
}
.tap{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 150px;
width: 200px;
height: 200px;
background: green;
}
</style>
<script src="js/fastclick.js"></script>
<script src="js/zepto.js"></script>
</head>
<body>
<div class="click">click</div>
<div class="tap">touch</div>
<script>
var oClick = document.querySelector(".click");
var oTap = document.querySelector(".tap");
// 2.注册fastclick事件
// 所有元素都会被注册fastclick事件
FastClick.attach(document.body);
// 3.使用fastclick
// 注意点: 这里的click并不是系统的click, 而是fastclick事件
oTap.addEventListener("click", function () {
oTap.style.display = "none";
});
oClick.addEventListener("click", function () {
console.log("点透了");
});
</script>
</body>
</html>
