1.获取鼠标位置
*clientX/clientY 相对浏览器窗口坐标(不会随着滚动条而变化,不包含工具栏、导航栏)
event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。
*pageX/pageY page为页面的意思,页面的高度一般情况client游览器显示区域装不下,所以会出现垂直滚动条。
鼠标距离页面初始page原点的长度。
在IE中没有pageX、pageY取而代之的是event.x、evnet.y。
*offsetX/offsetY 目标事件距左上角(参考原点)长度 Chrome下,offsetX offsetY是包含边框的 ,而IE、FF是不包含边框的,如果鼠标进入到border区域,为返回负值。
2.实例代码
let oBox = document.getElementById("test");
oBox.addEventListener("touchstart",function(ev){
let startX=ev.targetTouches[0].clientX;
let startY=ev.targetTouches[0].clientY;
let disX=startX-oBox.offsetLeft;
let disY=startY-oBox.offsetTop;
let dir="";//拖拽方向 x代表横向拖拽 y代表纵向
function fnMove(ev){
let curX=ev.targetTouches[0].clientX;
let curY=ev.targetTouches[0].clientY;
if(dir==''){
if(Math.abs(curX-startX)>=5){
dir='x';
}else if(Math.abs(curY-startY)>=5){
dir='y';
}
}else{
if (dir=='x') {
oBox.style.left=ev.targetTouches[0].clientX-disX+'px';
}else if(dir=='y'){
oBox.style.top=ev.targetTouches[0].clientY-disY+'px';
}
}
}
function fnEnd(){
oBox.removeEventListener('touchmove',fnMove,false);
oBox.removeEventListener('touchend',fnEnd,false);
}
oBox.addEventListener('touchmove',fnMove,false);
oBox.addEventListener('touchend',fnEnd,false);
},false);