移動端touch觸控效果原生js，獲取觸控座標
<!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>
<!--
解釋touch:
1. touch是移動端的觸控事件 而且是一組事件
2. touchstart 當手指觸控式螢幕幕的時候觸發
3. touchmove 當手指在螢幕來回的滑動時候觸發
4. touchend 當手指離開螢幕的時候觸發
5. touchcancel 當被迫終止滑動的時候觸發（來電，彈訊息）
6. 利用touch相關事件實現移動端常見滑動效果和移動端常見的手勢事件
-->
<!--
使用touch:
1.繫結事件：box.addEventListener('touchstart',function () { });
2.事件物件：
名字：TouchList------觸控點（一個手指觸控就是一個觸發點，和螢幕的接觸點的個數）的集合
changedTouches 改變後的觸控點集合
targetTouches 當前元素的觸發點集合
touches 頁面上所有觸發點集合
3.觸控點集合在每個事件觸發的時候會不會去記錄觸控
changedTouches 每個事件都會記錄
targetTouches，touches 在離開螢幕的時候無法記錄觸控點
4.分析滑動實現的原理：
4.1 就是讓觸控的元素隨著手指的滑動做位置的改變
4.2 位置的改變：需要當前手指的座標
4.3 在每一個觸控點中會記錄當前觸控點的座標 e.touches[0] 第一個觸控點
4.4 clientX clientY 基於瀏覽器視窗（視口）
4.4 pageX pageY 基於頁面（視口）
4.4 screenX screenY 基於螢幕
-->
<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);
});
/*box.addEventListener('click',function (e) {
console.log('click');
console.log(e);
});*/
}
</script>
</body>
</html>