HTML 5 画布：检测长按答案

【问题标题】：HTML 5 canvas: detect long clickHTML 5 画布：检测长按
【发布时间】：2012-07-28 22:22:37
【问题描述】：

我正在处理一些 HTML5 画布绘图。绘图应用程序是一个 iPad WebApp。

现在我想知道是否有可能跟踪画布上的长按（点击并按住）并将其链接到画布外的事件。例如：我在画布上点击按住三秒钟，这会导致弹出窗口可见。

【问题讨论】：

标签： javascript ipad html web-applications canvas

【解决方案1】：

<canvas id="myCanvas"></canvas>

您可以简单地在画布的mousedown 事件上设置超时，然后在 mouseup 事件上清除它。

这是Demo

var canvas = document.getElementById('myCanvas');
var timer = null;

canvas.onmousedown = function(){
  timer = setTimeout( doStuff, 2000 );
};

canvas.onmouseup = function(){
  clearTimeout( timer );
};

function doStuff() {
  alert('hello, you just pressed the mousebutton for two seconds.')
}

【讨论】：

谢谢。添加了“canvas.onmousemove function(){ clearTimeout(timer);};”绘图时也要停止计数器！谢谢

【解决方案2】：

您可以使用Hammer.js 并监听“hold”事件。

【讨论】：

谢谢，我也会研究一下，看起来很有用！