web移動端 touchstar事件,touchmove事件 touchend事件
web移動端開發中常用的三個事件,現在的智慧機都是觸屏操作.所以觸控在移動端的開發中幾乎無處不在,下面介紹移動開發中常用的幾個事件
touchstart事件：當手指觸控式螢幕幕時候觸發，即使已經有一個手指放在螢幕上也會觸發。
touchmove事件：當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間，呼叫preventDefault()事件可以阻止滾動。
touchend事件：當手指從螢幕上離開的時候觸發
touchcancel事件：當系統停止跟蹤觸控的時候觸發。關於這個事件的確切出發時間，文件中並沒有具體說明
(touchcancel事件簡單的說是在移動端發生了觸控中斷，一般情況下就是優先順序比當前活動更高的事件時，才會觸發的。比如正在看新聞，手指滑動螢幕的時候，突然來電話，直接中斷了觸控事件，跳轉到了通話，頁面此時就觸發了touchcancel事件。這個事件不容易在瀏覽器的模擬器中模擬，之前我在用電腦的工作列切換的時候，受到啟發，可以試試在瀏覽器模擬器觸控的同時，按下鍵盤上的Alt+Tab鍵，果然觸發了touchcancel事件，有興趣的小夥伴可以試一下。)
這幾個事件都會冒泡,也可以取消,雖然這些觸控事件沒有在DOM規範中定義，但是它們卻是以相容DOM的方式實現的。所以，每個觸控事件的event物件都提供了在滑鼠實踐中常見的屬性：bubbles(起泡事件的型別)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯的預設動作)、clientX(返回當事件被觸發時，滑鼠指標的水平座標)、clientY(返回當事件觸發時，滑鼠指標的垂直座標)、screenX(當某個事件被觸發時，滑鼠指標的水平座標)和screenY(返回當某個事件被觸發時，滑鼠指標的垂直座標)。除了常見的DOM屬性，觸控事件還包含下面三個用於跟蹤觸控的屬性。
touches：表示當前跟蹤的觸控操作的touch物件的陣列。
targetTouches：特定於事件目標的Touch物件的陣列。
changeTouches：表示自上次觸控以來發生了什麼改變的Touch物件的陣列。
以上三個物件都包含一下屬性
clientX：觸控目標在視口中的x座標。
clientY：觸控目標在視口中的y座標。
identifier：標識觸控的唯一ID。
pageX：觸控目標在頁面中的x座標。
pageY：觸控目標在頁面中的y座標。
screenX：觸控目標在螢幕中的x座標。
screenY：觸控目標在螢幕中的y座標。
target：觸目的DOM節點目標
程式碼演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web移動端的事件</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
min-width: 320px;
max-width: 732px;
height: 1000px;
margin: 0 auto;
border: 1px red solid;
}
#box {
width: 50%;
height: 200px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container">
<div id="box"></div>
</div>
<script>
var boxObj=document.getElementById('box');
// // 新增事件
// boxObj.addEventListener('touchstart',function(e){
// console.log('start');
// console.log(e);
// });
//
// boxObj.addEventListener('touchmove',function(e){
// console.log('move');
// // console.log(e);
// });
//
// boxObj.addEventListener('touchend',function(e){
// console.log('end');
// console.log(e);
// })
/*==========封裝手勢事件函式===========*/
/**
*
* @param dom 滑動的元素
* @param leftCallBack 向左滑動的回撥函式
* @param rightCallBack 向右滑動的回撥函式
*/
var bindSwipeEvent = function(dom,leftCallBack,rightCallBack){
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){//當滑動的距離大於50時 才能執行相應的功能
if(distanceX>0){//向右滑動
rightCallBack&&rightCallBack.call(this,e);//改變this的指向
}else{//向右滑動
leftCallBack&&leftCallBack.call(this,e);
}
}
});
//重置引數
isMove=false;//判斷是否在滑動
startX = 0;//記錄滑動開始的位置
distanceX=0;//記錄移動的距離
};
//呼叫函式
bindSwipeEvent(boxObj,function(){
console.log('向左滑動');
},function () {
console.log('向右滑動')
})
</script>
</body>
</html>