如何实现触屏设备(手机)与非触屏设备(电脑)自动兼容

非触屏端支持的点击事件属性:

onmousedown();
onmousemove();
onmouseup();

触屏端支持的点击事件属性:

ontouchstart();
ontouchmove();
ontouchend();

所以只需判断是否支持ontouchstart()属性,即可分辨设备是触屏端还是非触屏端

function listenToUser(canvas) {

    //判断是手机还是电脑,就看其支不支持触屏,即是否有 ontouchstart 属性,这个就叫特性检测
    if (document.body.ontouchstart !== undefined) {
    
        //触屏设备
        //1.在触屏点一下
        canvas.ontouchstart = function () {}
        //2.手指在触屏上移动
		canvas.ontouchmove = function () {}
		//3.手机离开触屏
		canvas.ontouchend = function () {}
		}else{

		//非触屏设备
		//1.鼠标点击
		canvas.onmousedown = function () {}
		//2.按住鼠标不松开移动
		canvas.onmousemove = function () {}
		//3.松开鼠标
		canvas.onmouseup = function () {}
	}

猜你喜欢

转载自blog.csdn.net/weixin_42617604/article/details/88713625