【Canvas】在HTML画布上监听鼠标点击或触摸事件_canvas 点击事件 csdn

在做h5 canvas的时候需要注意一点,html网页上用canvas组件在不同平台上交互有时候会失效,需要做兼容处理,那是因为在手机浏览器上的不是鼠标点击,就是屏幕触摸事件.

在PC机浏览器上，都是用点击事件，

需要监听画布上的鼠标点击事件，代码如下，

//...
canvas.addEventListener('mousedown',(event)=>{
	const { x, y } = event;
	onTouchStart(x,y)
});
canvas.addEventListener('mousemove',(event)=>{
	const { x, y } = event;
	onTouchMove(x,y);
});
canvas.addEventListener('mouseup',onTouchEnd);
1
2
3
4
5
6
7
8
9
10

在手机（可触摸设备）浏览器上，小程序上，都是用触摸事件，

需要监听画布上的触摸事件，代码如下

//...
canvas.addEventListener('touchstart',(event)=>{
	const { pageX:x, pageY:y } = event.touches[0];
	onTouchStart(x,y);
});
canvas.addEventListener('touchmove',(event)=>{
	const { pageX:x, pageY:y } = event.touches[0];
	onTouchMove(x,y);
});
canvas.addEventListener('touchend',onTouchEnd);
1
2
3
4
5
6
7
8
9
10

要做兼容处理，就将上面的代码全部写一遍，并调用公用的方法，追加的代码如下

//触摸开始
function onTouchStart(x,y){
//...
}
//触摸移动
function onTouchMove(x,y){
//...
}
//触摸结束
function onTouchEnd(){
//...
}
1
2
3
4
5
6
7
8
9
10
11
12

就讲到 这，话不多.