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>