Question

我希望在任何设备上的html画布中提供非常有限的绘图可能性。当用户交互时，只有三件事可能发生：a＆＃34; unit＆＃34; （例如，它可能是40像素，或者10，它不是很重要）方块出现在没有的地方，当＃34;单击＆＃34;时矩形消失，最后，几个矩形融合。

前两个需要检测点击（相同的向下和向上坐标），后者需要检测拖动（不同的向下和向上坐标）。

因此，应用程序唯一需要做的就是检测（并记住）向下，然后向上检测坐标，无论是触摸，点击还是其他任何内容。

最后，我不想使用jquery或任何lib，而是从我的编码中学到一些东西。

此代码看起来没问题吗？你能提出改善意见吗？

canvas.ontouchstart = canvas.onmousedown = onDown;
function onDown(e) {
  saveDownCoords(e);
  e.preventDefault();
};
canvas.ontouchend = canvas.onmouseup = onUp;
function onUp(e) {
  ...do whatever;
};

第二个问题，关于preventDefault（），stopPropagation（）（或其他任何调用）：我已经读过需要停止事件注册两次，作为触摸和点击 - 但在什么情况和设备，确切地说，做触摸事件然后单击事件触发以获得唯一的用户物理操作？

Answer 1

对于第一个问题，最好使用element.addEventListener()：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

canvas.addEventListener("mouseup", function(event) {
    event.preventDefault(); // If you need to
    // ... Do whatever
}

关于您的第二个问题，event.preventDefault()调用是为了停止默认行为。例如，它可用于防止双击选择文本。

Javascript onclick ontouch

1 个答案: