具有自己定义的对象的 HTML5 画布答案

【问题标题】：HTML5 canvas with own defined objects具有自己定义的对象的 HTML5 画布
【发布时间】：2014-04-23 00:11:57
【问题描述】：

我有一个关于画布和画布上自定义对象的问题。画布上的自定义对象是一个具有不同属性的 javascript 类，可以在画布上多次绘制该 javascript 对象。所以现在我的问题是可以向那个javascript类添加一个oncontextmenu。我想要以下一个：

如果我在画布对象上右键单击这样的 javscript 类对象，应该会弹出上下文菜单。

【问题讨论】：

是的，这是可能的（并且很常见），但是您必须编写一些代码来处理和分发事件。进程中是否有某些部分阻碍了您？
是的，我真的不知道如何将一个函数添加到我自己的 javascript 对象中，该对象完全监听该事件。我想，关于类似的事情： MyObject.prototype.oncontextmenu = function () { alert("hi");}

标签： javascript html canvas contextmenu

【解决方案1】：

您可以在画布上侦听 contextmenu 事件（让您知道按下了鼠标右键）。

$("#canvas").contextmenu(function(e){handleContextMenu(e);});

function handleContextMenu(e){
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // hit-test each of your objects
  // if the mouse is inside an object
  // then display your context menu

}

然后遍历您的对象并测试鼠标是否在任何对象内。

如果它在对象内部，则显示您的上下文菜单。

有很多展示实际上下文菜单的谷歌示例。这是一个：

http://ignitersworld.com/lab/contextMenu.html

【讨论】：