目录 |
1.移动端事件基础
2.移动端常用的事件库
3.移动端轮播图css样式和响应
4.移动端轮播图图片延迟加载
1.移动端事件基础 |
PC端常用事件
事件名 | 作用 |
---|---|
click | 当鼠标点击时触发 |
mouseover | 当鼠标指针移动到元素上时触发 |
mouseout | 当鼠标指针移出元素时触发 |
mouseenter | 当鼠标指针移动到元素上时触发(不支持冒泡) |
mouseleave | 当鼠标指针移出元素上时触发(不支持冒泡) |
mousemove | 当鼠标指针移动到元素上时触发 |
mousedown | 当元素上按下鼠标按钮时触发 |
mouseup | 当在元素上释放鼠标按钮时触发 |
mousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
keydown | 在用户按下按键时触发 |
keyup | 当用户释放按键时触发 |
load | 页面结束加载之后触发 |
scroll | 当元素滚动条被滚动时运行的脚本 |
blur | 元素失去焦点时运行的脚本 |
focus | 当元素获得焦点时运行的脚本 |
change | 在元素值被改变时运行的脚本 |
移动端常用事件
事件名 | 作用 |
---|---|
click | 当点击时触发(单击) |
load | 页面结束加载之后触发 |
scroll | 当元素滚动条被滚动时运行的脚本 |
blur | 元素失去焦点时运行的脚本 |
focus | 当元素获得焦点时运行的脚本 |
change | 在元素值被改变时运行的脚本 |
input | 代替keyup、keydown |
touch事件模型 | 处理单手指操作 |
gesture事件模型 | 处理多手指操作 |
touch事件模型
事件名 | 作用 |
---|---|
touchstart | 手指按到屏幕上 |
touchmove | 手指在屏幕上滑动 |
touchend | 手指离开屏幕 |
touchcancle | 特殊情况下关闭/退出时触发 |
gesture事件模型
事件名 | 作用 |
---|---|
gesturestart | 当鼠标点击时触发 |
gesturechange | 当鼠标点击时触发 |
gestureend | 当鼠标点击时触发 |
touch事件的属性:
属性名 | 作用 |
---|---|
type | 事件类型 |
target | 事件源 |
preventDefault(returnValue) | 阻止默认行为 |
stopPropagation(cancleBubble) | 停止事件的传播 |
touches[0].clientX | 触碰位置的x值 |
changedTouches | 当前的值和离开的值 |
changedTouches和touches都是手指信息的集合(TouchList),touches获取到值的必备条件是只有手指还在屏幕上才可以获取,所以在touchend事件中如果想获取离开的瞬间坐标只能用changedTouches获取
click
在移动端属于单击事件,不是点击事件, 在移动端的项目中经常会区分单击做什么和双击做什么,所以移动端的浏览器在识别click的时候,只有确定是单击后才会把它执行。在移动端使用click会存在300ms的延迟,浏览器在第一次点击结束后还需要等待300ms,看是否触发了第二次点击,如果触发了第二次,就不属于click了,没有触发第二次才属于click。
例如:点击方块,旋转一周:
效果图:
使用click:
<script type="text/javascript">
var oBox = document.querySelector("#box");
oBox.addEventListener("click", function () {
this.style.webkitTransform = "rotate(360deg)";
}, false);
</script>
使用touch:
发生滑动,变成红色;点击旋转:
<script type="text/javascript">
function on(curEle, type, fn) {
curEle.addEventListener(type, fn, false);
}
var oBox = document.querySelector("#box");
//使用touch事件模型模拟实现点击事件操作,包含点击和双击
on(oBox, "touchstart", function (ev) {
var point = ev.touches[0];
this["strX"] = point.clientX;
this["strY"] = 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["strX"]) > 30 || Math.abs(newY - this["strY"]) > 30) {
this["isMove"] = true;
}
});
on(oBox, "touchend", function (ev) {
if (this["isMove"] === false) {
//点击
this.style.webkitTransitionDuration = "1s";
this.style.webkitTransform = "rotate(360deg)";
var delayTimer = window.setTimeout(function () {
this.style.webkitTransitionDuration = "0s";
this.style.webkitTransform = "rotate(0deg)";
}.bind(this), 1000);
} else {
this.style.background = "red";
}
});
</script>
使用fastclick插件(解决移动端使用click导致的300ms延迟的问题):
<script type="text/javascript">
FastClick.attach(document.body);
var oBox = document.querySelector("#box");
oBox.addEventListener("click", function () {
this.style.webkitTransform = "rotate(360deg)";
this.style.webkitTransitionDuration = "1s";
this.style.webkitTransform = "rotate(360deg)";
var delayTimer = window.setTimeout(function () {
this.style.webkitTransitionDuration = "0s";
this.style.webkitTransform = "rotate(0deg)";
}.bind(this), 1000);
}, false);
</script>
点击、单击、双击、长按、滑动
单击和双击(300ms)
点击和长按(750ms)
点击和滑动(x或y偏移的距离是否在30px以内,超过30px是滑动)
左右滑动和上下滑动(x轴偏移的距离>y轴偏移的距离=左右滑,相反就是上下滑)
左滑和右滑(偏移的距离>0=右滑,相反左滑)
2.移动端常用的事件库 |
FastClick.js:解决click事件的300ms的延迟
Touch.js:百度云手势事件库 https://github.com/Clouda-team/touch.code.baidu.com
hammer.js:同上
Zepto.js:被誉为移动端的小型jQuery。
https://github.com/ZhaoJingnian/zepto
jQuery由于是在pc端使用的,所以代码中包含大量的对于IE的兼容处理,而Zepto只应用于移动端开发,所以在jQuery的基础上没有对低版本的IE进行支持。
jQuery提供了很多的选择器类型及DOM的操作方法,但是Zepto中只是实现了部分常用的选择器和方法,例如:jQuery中的动画方法有animate、hide、show、toggle、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle….但是Zepto中只有,所以Zepto的代码大小比jQuery小很多。
Zepto专门为移动端开发而诞生,所以相对于jQuery来说更适合移动端:Zepto的animate动画方法支持了css3动画的操作,Zepto专门的准备了移动端常用的事件操作。
tap:点击、singleTap:点击、doubleTap:双击、longTap:长按、swipe:滑动、swipeUp:上滑、swipeDown:下滑、swipeLeft:左滑、swipeRight:下滑
3.移动端轮播图css样式和响应 |
4.移动端轮播图图片延迟加载 |