javascript - html 画布中的 onmousedown、ondmouseup、onclick、ondblclick、oncontextmenu

Question

我在 html canvas 中工作，我需要执行 4 个操作：

• 拖放元素
• 拉伸元素
• 创建元素
• 编辑元素

因此对于：

• 拖放：我应该使用 canvas.onmousedown 和 canvas.ondmouseup
• 拉伸：canvas.onclick 选择元素然后 canvas.onclick 在元素的框架上
• 创建：canvas.ondblclick
• 编辑：canvas.oncontextmenu

但 onmousedown 和 ondmouseup “覆盖”所有其他 clic。和 onclic “覆盖” ondblclick

我试过了：

canvas.oncontextmenu = function(event) {
        myContextmenu(canvas);   
       return false;
    }

和

canvas.addEventListener('ontextmenu', function(e) {
     alert("right clic"+e.clientX+";"+e.clientY);
   }, true);

如果我尝试使用 onmousedown、ondmouseup、onclick 功能，那么一个和另一个一样不起作用。

如果有人可以帮助我欢迎

Answer 1

您必须使用 onmousedown 和 onmouseup 管理自己的单击和双击检测。

单击是在 onmousedown 之后的 onmouseup，两者之间几乎没有移动。

双击当然是快速连续的单击。

因此，您必须存储一些状态变量，例如 mousedown 的位置和日期（这在拖动时很有用，因此您可以随时计算移动）。

如果您手动进行拖放（即不使用不那么兼容的 HTML5 新功能），您将必须挂钩 onmousemove 以便您可以在移动期间显示拖动的对象（它有助于检测上下移动）。