移动端事件理解
2018-08-12 本文已影响0人
小豆soybean
一、双击缩放
如果没加这一句，双击会缩放。
<meta name="viewport" content="width=device-width">
没加时候由于系统要判断是不是要双击，所以在单击时候会延迟300ms判断，产生传说中的“300ms延迟”。现在不用双击缩放了，而是使用手指拉开或者收缩。所以解决300ms延迟可以加这句。
当加了这句话，浏览器会判断当前是响应式的，就会禁止默认的缩放行为，因此也不会产生300ms延迟了。
二、touchstart 、touchmove、touchend、click 事件的触发先后顺序。
点击level10按钮显示的结果为 。 1356
var level10 = document.getElementById("level1-0");
level10.addEventListener('touchstart', function(e) {
e.preventDefault();//加了这句就不会有后面的点击事件了。只有1和3但是move还是有
console.log(1);
});
level10.addEventListener('touchmove', function(e) {
console.log(2);
});
level10.addEventListener('touchend', function(e) {
console.log(3);
});
level10.onclick = function() {
console.log(5);
}
document.body.onclick = function() {
console.log('6');
}
原因：先start、然后end、然后click、最后冒泡到body、所以出现1356.
想只触摸不点击就加个preventDefault
tips：move和click只能触发其中的一种。互相不共存。
三、点透事件
<style type="text/css">
#level0 {
/* width: 500px;
height: 500px; */
position: relative;
}
#level1-0 {
position: absolute;
z-index: 1;
background: red;
width: 200px;
height: 500px;
}
#level1-1 {
background: green;
width: 200px;
height: 500px;
}
</style>
</head>
<body>
<div id="level0">
<div id="level1-0">
</div>
<div id="level1-1">
</div>
</div>
以上为设置10和11一样大小，10层级在11上面
var level10 = document.getElementById("level1-0");
var level11 = document.getElementById("level1-1");
level10.addEventListener('touchstart', function(e) {
level10.style.display = 'none';
// e.preventDefault();//不加的话，会出现点透事件
});
level11.addEventListener('touchstart',function (e) {
console.log(1);
},false);
level11.onclick = function() {
console.log('level11莫名被点击了');
console.log(2);
};
level11.addEventListener('touchmove',function (e) {
console.log(3);
},false);
level11.addEventListener('touchend',function (e) {
console.log(4);
},false);
点击10的时候10的dom消失了，所以点击事件就穿透到了11那边。但是11只会出现一个click事件，而没有出现end。当给10加上preventDefault就不会出现点透事件了。
