最近遇到的需求，在windows触屏设备上，实现手指拖动div框。以下是我网上找的资料，如有什么错误，希望大家给与指正。
2019/4/4
触摸事件Touch
移动端有四个关于触摸的事件
touchstart 触摸开始的时候触发
touchmove 手指在屏幕上滑动的时候触发
touchend 触摸结束的时候触发
touchcancel 取消触摸事件时候触发（极少用）
触发顺序是touchstart-->touchmove-->touchend-->click，注意；需要阻止一下事件冒泡。
每个事件可产生一个event对象，这个event对象除基本的一些属性外还附带了三个额外的属性：
touches
一个TouchList对象，包含当前所有屏幕上的触点的Touch对象，
该属性不一定是当前元素的touchstart事件触发，需要注意。
targetTouches
一个TouchList对象，包含从当前元素touchstart事件触发的
的触点的Touch对象，跟上面的touches区别于触发点不一样。(尽量使用这个方法)
changedTouches
一个TouchList对象，对于touchstart事件, 这个TouchList对象列出在此次事件中新增加的触点。
对于touchmove事件，列出和上一次事件相比较，发生了变化的触点。
对于touchend，列出离开触摸平面的触点。
注：touches和targetTouches只存储接触屏幕的触点，touchend时，touches和targetTouches是个空数组
每个触点包含的常用信息：
identifier：
一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号
pageX/pageX/clientX/clientY/screenX/screenY：
动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
target：
DOM元素，是动作所针对的目标。
注意事项：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
加上这句代码后，我们编写的页面将不会随着用的手势而放大缩小。
2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。
IE10的触摸事件
引用：https://blogs.msdn.microsoft.com/ie/2011/09/20/touch-input-for-ie10-and-metro-style-apps/
事件名称
MSPointerDown 触摸开始
MSPointerMove 接触点移动
MSPointerUp 触摸结束
MSPointerOver 触摸点移动到元素内，相当于mouseover
MSPointerOut 触摸点离开元素，相当于mouseout
该事件有三种触发形式：鼠标单击，电子笔轻触和手指触摸。
该事件提供鼠标事件中预期的所有常用属性（client X/Y coordinates, target element, button states, etc）以及其他输入形式的新属性：压力，接触几何，倾斜等
触点的属性
hwTimestamp 创建事件的时间（ms）
isPrimary 标识该指针是不是主指针
pointerId 指针的唯一ID（类似于触摸事件的标识符）
pointerType 一个整数，标识了该事件来自鼠标、手写笔还是手指
pressure 笔的压力，0-255，只有手写笔输入时才可用
rotation 0-359的整数，光标的旋转度（如果支持的话）
tiltX/tiltY 手写笔的倾斜度，只有用手写笔输入时才支持
例：
function handleEvent(event){
switch(event.pointerType){
case 'touch':
//手指
break;
case 'pen':
//手写笔
break;
case 'mouse':
//鼠标
break;
default:
break;
}
}
document.body.addEventListener("MSPointerDown", handleEvent, false);
示例：
1、点击div移动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<style type="text/css">
html {
overflow: hidden;
-ms-content-zooming: none; /* Disable pan/zoom */
-ms-touch-action: none; /* Disable touch behaviors, like pan and zoom */
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
margin: 0px;
left:200px;
top:200px;
}
#banner {
background: #52CCCC;
height: 30px;
//cursor: move;
}
</style>
<script>
window.οnlοad=function(){
console.log("load");
var div=document.getElementById('banner');
div.addEventListener("MSPointerDown", handleEvent, false);
div.addEventListener("MSPointerMove", handleEvent1, false);
div.addEventListener("MSPointerUp", handleEvent2, false);
var isMove ;
var abs_x ;
var abs_y ;
function handleEvent(event) {
isMove = true;
var obj = document.getElementsByClassName('moveBar');
abs_x = event.pageX - obj[0].offsetLeft;
abs_y = event.pageY - obj[0].offsetTop;
}
function handleEvent1(ev) {
console.log(ev);
if(isMove) {
var obj = document.getElementsByClassName('moveBar');
obj[0].style.color="red";
obj[0].style.left= ev.pageX - abs_x+'px';
obj[0].style.top= ev.pageY - abs_y+'px';
}
}
function handleEvent2() {
isMove = false;
}
}
</script>
</head>
<body >
<div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
</body>
</html>
3653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
