最近遇到的需求,在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>