智能机和台式机的页面中都有 click 事件，出于这个原因，如果你只使用click事件的话，PC机和智能机使用的程序可以是相同的。
然而，在智能机中click事件会出现稍微的延迟现象，在手机程序中很多时候必须需要实时反应。
这个时候我们怎么办？
智能机专用的事件使用。
当发生click事件延迟的状况时，我们就有必要使用智能机专用的事件来处理。然而，智能机使用的事件在PC/MAC的浏览器上不能运行，因此，为了使PC/MAC及智能机都能够正常运行，我们必须先对程序在运行的平台进行判断，然后使用相应的事件来进行处理。
var andx,andy;
var touch_dev = false;
//判断使用设备
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
touch_dev = true;
}
//PC添加事件 否则 智能机事件
if (touch_dev == false) {
canvas.addEventListener('click',click_event,false);
} else {
canvas.addEventListener("touchstart", and_start, false);
canvas.addEventListener("touchmove", and_move, false);
canvas.addEventListener("touchend", and_end, false);
}
function execlick(x,y) {
// 相当于单击事件的处理
}
function click_event(event) {
var rct = event.target.getBoundingClientRect();
var x = event.clientX - rct.left;
var y = event.clientY - rct.top;
execlick(x,y);
}
function and_start(event) {
var rct = event.target.getBoundingClientRect();
var x = event.touches[0].pageX - rct.left;
var y = event.touches[0].pageY - rct.top;
andx = x;
andy = y;
}
function and_move(event) {
var rct = event.target.getBoundingClientRect();
var x = event.touches[0].pageX - rct.left;
var y = event.touches[0].pageY - rct.top;
andx = x;
andy = y;
}
function and_end(event) {
execlick(andx,andy);
}
按照上面的代码，我们可以判断使用的设备是iphone/ipod/ipad/Android还是 PC系统，然后进行相应的事件处理。
此外，智能机的鼠标单击事件可以使用and_end事件，可是and_end事件发生时，为手指从屏幕上移开的时候，单击的位置不好控制，处于这个原因，在上面的代码中使用and_start/and_move事件来捕捉触摸位置，然后再以and_end事件最后的位置作为单击的位置使用。