javascript 监听某个控件的touch滑动事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m940034240/article/details/82499548

根据设备选择实现方法，否则没有效果。

手机移动端实现：

   		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);	 

参考：js监听手机端的touch滑动事件

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;
            };
   		 };