当前位置:主页 >> JSP及框架 >> 正文
html5中JavaScript click及触摸技术初探(click事件)
阅读:2371 输入:2014-12-30 11:12:24

智能机和台式机的页面中都有 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事件最后的位置作为单击的位置使用。