移動Web開發之事件
觸摸事件touch
touch
事件:
touch
是移動端的觸摸事件
而且是一組事件
touchstart
當手指觸摸屏幕的時候觸發touchmove
當手指在屏幕來回的滑動時候觸發touchend
當手指離開屏幕的時候觸發touchcancel
當被迫終止滑動的時候觸發(來電,彈消息)- 利用
touch
相關事件實現移動端常見滑動效果和移動端常見的手勢事件
使用touch
:
- 綁定事件:
box.addEventListener('touchstart',function () { });
- 事件對象:
名字:TouchList
------觸摸點(一個手指觸摸就是一個觸發點,和屏幕的接觸點的個數)的集合
changedTouches
改變後的觸摸點集合
targetTouches
當前元素的觸發點集合
touches
頁面上所有觸發點集合 - 觸摸點集合在每個事件觸發的時候會不會去記錄觸摸
changedTouches
每個事件都會記錄
targetTouches
,touches
在離開屏幕的時候無法記錄觸摸點 - 分析滑動實現的原理:
4.1 就是讓觸摸的元素隨着手指的滑動做位置的改變
4.2 位置的改變:需要當前手指的座標
4.3 在每一個觸摸點中會記錄當前觸摸點的座標 e.touches[0] 第一個觸摸點
4.4clientX
clientY
基於瀏覽器窗口(視口)
4.4pageX pageY
基於頁面(視口)
4.4screenX screenY
基於屏幕
<!DOCTYPE html>
<html lang="en">
<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>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function () {
var box = document.querySelector('.box');
box.addEventListener('touchstart',function (e) {
console.log('start');
console.log(e.touches[0].clientX,e.touches[0].clientY);
console.log(e.touches[0].pageX,e.touches[0].pageY);
console.log(e.touches[0].screenX,e.touches[0].screenY);
});
box.addEventListener('touchmove',function (e) {
console.log('move');
console.log(e);
});
box.addEventListener('touchend',function (e) {
console.log('end');
console.log(e);
});
/*PC端事件*/
/*box.addEventListener('click',function (e) {
console.log('click');
console.log(e);
});*/
}
</script>
</body>
</html>
手勢事件
- 理解移動端的手勢事件
swipe swipeLeft swipeRight swipeUp swipeDown
左滑
和右滑
手勢怎麼實現原理- 沒有原生手勢,但可以封裝
Html
結構如上,js
控制
window.onload = function () {
/*1. 理解移動端的手勢事件*/
/*2. swipe swipeLeft swipeRight swipeUp swipeDown */
/*3. 左滑和右滑手勢怎麼實現*/
var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
/*自定義手勢的條件*/
/*1.必須滑動過*/
/*2.滑動的距離50px*/
var isMove = false;
var startX = 0;
var distanceX = 0;
dom.addEventListener('touchstart',function (e) {
startX = e.touches[0].clientX;
});
dom.addEventListener('touchmove',function (e) {
isMove = true;
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
});
dom.addEventListener('touchend',function (e) {
/*滑動結束*/
if(isMove && Math.abs(distanceX) > 50){
if(distanceX > 0){
//rightCallback && rightCallback(e);
rightCallback && rightCallback.call(this,e);
}else{
leftCallback && leftCallback.call(this,e);
}
}
/*重置參數*/
isMove = false;
startX = 0;
distanceX = 0;
});
}
bindSwipeEvent(document.querySelector('.box'),function (e) {
console.log(this);
console.log(e);
console.log('左滑手勢');
},function (e) {
console.log(this);
console.log(e);
console.log('右滑手勢');
});
}
說明
rightCallback && rightCallback.call(this,e);
- 先判斷方法是否存在
rightCallback.call(this,e)
改變rightCallback
方法的this
指向,並傳遞參數e
.- 此時
rightCallback()
方法執行是this
的指向即爲傳遞的this
對象
tap
事件
- 輕擊 輕觸 (響應速度快),提高移動端點擊事件的響應,默認點擊延時
300ms
- 移動端也有
click
事件
在移動爲了區分是滑動還是點擊,click
點擊延時300ms
- 解決
click
延時,影響用戶體驗 響應太慢了。
解決方案
- 使用tap事件(不是移動端原生事件,通過touch相關事件衍生過來) (zepto.js tap事件)瞭解其原理
//tap事件原理,設置(touchend時間-touchstart時間 < 150 && 沒有觸發移動事件),即爲tap
window.onload = function () {
/*使用tap事件*/
/*1. 響應的速度比click要快 150ms */
/*2. 不能滑動*/
var bindTapEvent = function (dom, callback) {
/*事件的執行順序 touchstart -> touchmove -> touchend -> click*/
/*在谷歌瀏覽器模擬看不到300ms的效果*/
/*在真機上面才能看看到延時效果*/
var startTime = 0;
var isMove = false;
dom.addEventListener('touchstart', function () {
//console.log('touchstart');
startTime = Date.now(); //new Date().getTime();效率沒有Date.now()高
/*Date.now();*/
});
dom.addEventListener('touchmove', function () {
//console.log('touchmove');
isMove = true;
});
dom.addEventListener('touchend', function (e) {
//console.log('touchend');
console.log((Date.now() - startTime));
if ((Date.now() - startTime) < 150 && !isMove) {
callback && callback.call(this, e);
}
startTime = 0;
isMove = false;
});
//click事件
/*dom.addEventListener('click',function () {
//console.log('click');
});*/
}
bindTapEvent(document.querySelector('.box'), function (e) {
console.log(this);
console.log(e);
console.log('tap事件')
});
}
- 使用一個叫:
fastclick.js
提供移動端click
響應速度的
2.1 下載:https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
2.2 使用:
<script src="../js/fastclick.min.js"></script>
<script>
/*當頁面的dom元素加載完成*/
document.addEventListener('DOMContentLoaded', function() {
/*初始化方法*/
FastClick.attach(document.body);
}, false);
/*正常使用click事件就可以了*/
</script>