1.12移动端事件
2017-01-13 本文已影响0人
overisover
解决移动端延迟300s的插件：
<script type='application/javascript' src='/path/to/fastclick.js'></script>
使用：
jquery:
$(function() {
FastClick.attach(document.body);
});
js原生：
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
事件类型
touchstart 手指按下
touchmove 手指移动
touchend 手指抬起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
<style>
div{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
<p></p>
<script>
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
//最好不要用on的方式, 在chrome 模拟器下时好时坏
oDiv.addEventListener('touchstart', function(){
oP.innerHTML += '按下';
}, false);
oDiv.addEventListener('touchmove', function(){
oP.innerHTML += '移动';
}, false);
oDiv.addEventListener('touchend', function(){
oP.innerHTML += '抬起';
}, false);
</script>
</body>
</html>
PC端事件用在移动端会慢300s
移动端的点透
<style>
div{
height: 200px;
width: 200px;
background: rgba(99, 99, 99, 0.5);
position: absolute;
top: 0;
}
</style>
<span>span， 点击我</span>
<div></div>
<script>
var oDiv = document.querySelector('div');
var oSpan = document.querySelector('span');
oDiv.addEventListener('touchend', function(){
this.style.display = 'none';
}, false);
oSpan.addEventListener('click', function(){
alert(1);
}, false);
</script>
效果是点击div，手指抬起div消失
但是，当你点到div上span标签的位置，会触发span的click事件，div是覆盖了span标签的
解决：
1：如果你点击div300毫秒之后才抬起手指, 也不会触发span的click事件
原因就是因为pc上的事件比移动端的事件的300ms延迟
2：换成移动端事件
oSpan.addEventListener('touchend', function(){
alert(1);
}, false);
3:阻止pc的事件
//猜想（pc的事件应该都算默认行为）
document.addEventListener('touchstart', function(ev){//在移动事件里阻止默认行为
ev.preventDefault();
}, false);
这是你阻止的click事件， 永远都不会触发, a标签也不会跳转，
touch所有类型事件都会冒泡，如果阻止了touchstart的默认行为，后续的mousedown和click事件将不会触发
阻止了touchmove的默认行为，后续的mousemove事件将不会触发
如果阻止了touchend的默认行为，后续的mouseup和click事件将不会触发
同时解决了：
// <meta name="viewport" content="width=device-width,user-scalable=no">
IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放）
解决IOS10下溢出隐藏的问题。
禁止系统默认的滚动条、阻止橡皮筋效果
禁止长按选中文字、选中图片、系统默认菜单
解决点透问题
也阻止了焦点元素的焦点行为(要正常使用：ev.stopPropagation()阻止冒泡)
手机端，无缝滚动效果代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<style>
*{
margin:0;
padding:0;
}
.box{
width:100%;
font-size: 0;
/*overflow: hidden;*/
}
.wrap{
position: relative;
left: 0;
white-space: nowrap;
}
.wrap img{
width:100%;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
</div>
<script>
var wrap=document.querySelector('.wrap');
var img=document.querySelector('img');
var left;
var disX;
var imgW=img.offsetWidth;
wrap.addEventListener('touchstart',function(ev){
this.style.transition='none';
this.style.webkitTransition='none';
left=getComputedStyle(this)['left'];//当前wrap的left 有px单位
left = parseInt(left);//去掉px
disX=ev.changedTouches[0].pageX;//手指的位置
// console.log(disX)
var iNow=Math.round(left/imgW)
if(iNow===0){
this.style.left=-5*imgW+'px';
}
if(iNow===-9){
this.style.left=-4*imgW+'px';
}
left=getComputedStyle(this)['left'];//当前wrap的left 有px单位
left = parseInt(left);//去掉px
})
wrap.addEventListener('touchmove',function(ev){
ev.preventDefault();//阻止图片的默认行为，使图片可以拖动
var moveDisX=ev.changedTouches[0].pageX-disX;//获取手指移动距离
this.style.left=left+moveDisX+'px';
// console.log(moveDisX)
})
wrap.addEventListener('touchend',function(ev){
this.style.transition='1s left';
this.style.webkitTransition='1s left';
left=getComputedStyle(this)['left'];
left=parseInt(left);
var iNow=Math.round(left/imgW);
this.style.left=iNow*imgW+'px';
})
</script>
</body>
</html>
