Html 矩形的kineticjs上下文菜单

var阶段=新的动力学阶段({
容器：'容器'，
x:10，
y:10，
宽度：800，
身高：200，
});
var layer=新的动能层（）；
var Igpk=新的动能.Rect({
id:'igpk'，
x:148，
y:32，
宽度：62，
身高：118，
填写：'黄金'，
笔画：“黑色”，
冲程宽度：2，
不透明度：1，
可拖动：错误
});
var Igpktext=新的动能文本({
x:148+1，
y:32，
文本：“iGPK”，
尺寸：15，
fontFamily：“Calibri”，
填充：“黑色”，
});
var-IgpkGroup=新的动力学组（{}）；
IgpkGroup.add（Igpk）；
IgpkGroup.add（Igpktext）；
var Requestone=new dynamic.Rect({
id:“myRect”，
x:219，
y:28，
宽度：116，
身高：118，
填写：“#87cefa”，
笔画：“黑色”，
冲程宽度：2，
不透明度：1，
可拖动：错误
});
var Requestonetext=new dynamic.Text({
x:219+1，
y:28，
文本：'请求一'，
尺寸：15，
fontFamily：“Calibri”，
填充：“黑色”，
});
var RequestoneGroup=new dynamic.Group（{}）；
添加（Requestone）；
添加（Requestonetext）；
RequestoneGroup.on（'click'，function（））{
$.contextMenu({
选择器：“#容器”，
项目：$.contextMenu.fromMenu（$（'#html5menu1'））
});
});
IgpkGroup.on（'click'，function（）{
$.contextMenu({
选择器：“#容器”，
项目：$.contextMenu.fromMenu（$（'#html5'））
});
});
图层添加（IgpkGroup）；
layer.add（RequestoneGroup）；
阶段。添加（层）
css
.ui菜单{
宽度：300px；
高度：500px；
}
因为我们要在同一个元素（容器）上显示多个上下文菜单，所以我们需要在创建另一个上下文菜单之前销毁上下文菜单

$.contextMenu('destroy', '#container');    

这并不能解决所有问题。正如您将看到的，上下文菜单的性质不允许在不先左键单击关闭它，然后再次右键单击另一个矩形的情况下进行更改。我认为这是因为上下文菜单的事件处理阻止了事件传播到KineticJS将捕获它的阶段

你可以这样做，点击白色舞台会破坏菜单，所以右键点击舞台时看不到特定的菜单。
这完全取决于你想要什么样的行为，但重点是，你需要破坏菜单：）


var stage=新Konva.stage({
容器：'容器'，
x:10，
y:10，
宽度：800，
身高：200，
});
var layer=新Konva.layer（）；
var Igpk=新Konva.Rect({
id:'igpk'，
x:148，
y:32，
宽度：62，
身高：118，
填写：'黄金'，
笔画：“黑色”，
冲程宽度：2，
不透明度：1，
可拖动：错误
});
var Igpktext=new Konva.Text({
x:148+1，
y:32，
文本：“iGPK”，
尺寸：15，
fontFamily：“Calibri”，
填充：“黑色”，
});
var-IgpkGroup=new Konva.Group（{}）；
IgpkGroup.add（Igpk）；
IgpkGroup.add（Igpktext）；
var Requestone=new Konva.Rect({
id:“myRect”，
x:219，
y:28，
宽度：116，
身高：118，
填写：“#87cefa”，
笔画：“黑色”，
冲程宽度：2，
不透明度：1，
可拖动：错误
});
var Requestonetext=new Konva.Text({
x:219+1，
y:28，
文本：'请求一'，
尺寸：15，
fontFamily：“Calibri”，
填充：“黑色”，
});
var RequestoneGroup=new Konva.Group（{}）；
添加（Requestone）；
添加（Requestonetext）；
RequestoneGroup.on（'click'，function（））{
控制台日志（“请求”）；
$.contextMenu（'销毁'，'容器'）；
$.contextMenu({
选择器：“#容器”，
项目：{
“RequestoneGroup”：{
名称：“RequestoneGroup”，
图标：“编辑”
}
}
});
});
IgpkGroup.on（'click'，function（）{
console.log（“IgpkGroup”）；
$.contextMenu（'销毁'，'容器'）；
$.contextMenu({
选择器：“#容器”，
项目：{
“IgpkGroup”：{
名称：“IgpkGroup”，
图标：“编辑”
}
}
});
});
图层添加（IgpkGroup）；
layer.add（RequestoneGroup）；
阶段。添加（层）
css
.ui菜单{
宽度：300px；
高度：500px；
}
因为我们要在同一个元素（容器）上显示多个上下文菜单，所以我们需要在创建另一个上下文菜单之前销毁上下文菜单

$.contextMenu('destroy', '#container');    

这并不能解决所有问题。正如您将看到的，上下文菜单的性质不允许在不先左键单击关闭它，然后再次右键单击另一个矩形的情况下进行更改。我认为这是因为上下文菜单的事件处理阻止了事件传播到KineticJS将捕获它的阶段

你可以这样做，点击白色舞台会破坏菜单，所以右键点击舞台时看不到特定的菜单。
这完全取决于你想要什么样的行为，但重点是，你需要破坏菜单：）


var stage=新Konva.stage({
容器：'容器'，
x:10，
y:10，
宽度：800，
身高：200，
});
var layer=新Konva.layer（）；
var Igpk=新Konva.Rect({
id:'igpk'，
x:148，
y:32，
宽度：62，
身高：118，
填写：'黄金'，
笔画：“黑色”，
冲程宽度：2，
不透明度：1，
可拖动：错误
});
var Igpktext=new Konva.Text({
x:148+1，
y:32，
文本：“iGPK”，
尺寸：15，
fontFamily：“Calibri”，
填充：“黑色”，
});
var-IgpkGroup=new Konva.Group（{}）；
IgpkGroup.add（Igpk）；
IgpkGroup.add（Igpktext）；
var Requestone=new Konva.Rect({
id:“myRect”，
x:219，
y:28，
宽度：116，
身高：118，
填写：“#87cefa”，
笔画：“黑色”，
冲程宽度：2，
不透明度：1，
可拖动：false
});
var Requestonetext=new Konva.Text({
x:219+1，
y:28，
文本：'请求一'，