根据设备选择实现方法,否则没有效果。
手机移动端实现:
var startx, starty;
//手指接触屏幕
document.getElementById('bt').addEventListener("touchstart", function(e){
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
console.log("start:"+startx + "," +starty);
}, false);
//手指离开屏幕
document.getElementById('bt').addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
console.log("end:"+endx + "," +endy);
}, false);
//手指在屏幕滑动
document.getElementById('bt').addEventListener("touchmove", function(e){
var movex, movey;
movex = e.touches[0].pageX - startx;
movey = e.touches[0].pageY - starty;
console.log("move:"+movex + "," +movey);
}, false);
pc端实现:
window.onload = function(){
var box = document.getElementById("bt");
var onoff = false;
var disx;
var disy;
box.onmousedown = function(ev){
disx = ev.clientX - this.offsetLeft;
disy = ev.clientY - this.offsetTop;
onoff = true;
console.log(disx + ", " + disy);
};
box.onmousemove = function(ev){
if(onoff){
var l = ev.clientX - disx ;
var t = ev.clientY - disy;
console.log("end:" + l + ", " + t);
}
};
box.onmouseup = function(){
onoff = false;
};
};