PC端的基本事件:
鼠标事件:click mouseover mouseout mouseenter浏览器能够阻止其默认的冒泡机制 mouseleave
mousemove mousedown mouseup mousewheel滚轮事件 load scroll blur focus change
键盘事件: keydown keyup
移动端的基本事件:
click load scroll blur focus change input(代替keydown keyup)..... touch事件模型(处理单手指操作) gesture(处理多手指操作)
移动端要操作的行为很多(长按 双击 放大 缩小 旋转 摇一摇 重力感应),但是移动端并没有给我们提供这个操作的事件类型,要我们自己来处理这些事件,一般用touch和cesture事件模型组合实现
touch事件模型:touchstart(手指摁下的时候) touchmove(手指在屏幕上滑动) touchend(手指离开屏幕的时候) touchcancle(出现异常情况,一般不用) 移动端标准事件
gesture事件模型:gesturestart gestureend gesturechange
click:
在移动端click属于单击事件,不是点击事件,在移动端的项目中,我们经常会区分单击做什么,双击做什么,所以移动端的浏览器再识别click的时候,只有确定是单击后才会把它执行。
在移动端使用click会存在300ms的延迟,浏览器会在第一次点击结束后,还需要等到300ms看是否触发了第二次点击,如果触发了第二次点击就不属于click了,没有触发第二次点击才属于click
// 移动端使用click方法会存在300ms的延迟
var oBox = document.querySelector('.box');
oBox.addEventListener('click',function () {
this.style.webkitTransform = 'rotate(360deg)';
},false);
如果想解决300ms的延迟问题,就使用touchstart touchmove touchend自己进行模拟就可以了
首先console.log查看一下ev里面包含了什么东西
ev:TouchEvent => 里面有我们熟悉的type,preventDefault(returnValue),stopPropagation(cancelBubble),changedTouches,touches
其中,changedTouches和touches都是手指信息的集合(TouchList),touch获取到的值得必备条件只有手指还在屏幕上才可以获取,所以在touchend事件中如果想获取离开的瞬间坐标,只能使用changedTouches获取
在移动端使用touch模型,则不会直接得到clientX,需要用ev.touch[0].clientX来获取
<script type="text/javascript">
//解决300ms延迟问题方法1,使用touch模型实现点击操作(单击&&双击)
var oBox = document.querySelector('.box');
function on(curEle, type, fn) {
curEle.addEventListener(type, fn);
}
on(oBox, 'touchstart', function (ev) {
var point = ev.touches[0];
this['staX'] = point.clientX;
this['staY'] = point.clientY;
this['isMove'] = false;
});
on(oBox, 'touchmove', function (ev) {
var point = ev.touches[0];
var newX = point.clientX,
newY = point.clientY;
// 判断是否发生滑动,我们需要判断偏移的值是否在30px之内
if (Math.abs(newX - this['staX']) > 30 || Math.abs(newY - this['staY']) > 30) {
this['isMove'] = true;
}
});
on(oBox, 'touchend', function (ev) {
//点击,实现可以连续的点击旋转原理:定义一个定时器,当用1s时间旋转到360°的时候,
// 立刻让盒子的位置变为0°,由于有1s的动画效果,点击之后就会1s实现一次动画无限自动旋转
// 所以需要在定时器中让0°时候,也让动画的持续时间变为0,当再次点击的时候持续时间变为1
if (this['isMove'] === false) {
this.style.transitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
window.setTimeout(function () {
this.style.transitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this),1000);
} else {//滑动
this.style.background = 'red';
}
});
</script>
<script type="text/javascript" src="js/fastClick.js"></script>
<script type="text/javascript">
//解决300ms延迟问题,使用fastClick.js文件
FastClick.attach(document.body);
// 移动端使用click方法会存在300ms的延迟
var oBox = document.querySelector('.box');
oBox.addEventListener('click', function () {
this.style.transitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
window.setTimeout(function () {
this.style.transitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this),1000);
}, false);
</script>
页面的HTML和CSS
<div class="box"></div>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>移动端事件click</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #eee;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: lightblue;
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
}
</style>
</head>
总结:
点击,单击,双击,长按,滑动,左滑,右滑,上滑。下滑....
单击和双击,相差300ms
点击和长按,相差750ms
点击和滑动,X/Y轴偏移的距离是否在30px之内,超过就是滑动
左右滑动和上下滑动,X轴偏移的距离 > Y轴偏移的距离 = 左右滑 反之,上下滑
左滑和右滑,偏移的距离 > 0 = 右滑,反之左滑