我需要在点击舞台时禁用动力学 js 中的上下文菜单。我已经尝试了event.preventDefault()、cancelbubble、event.stopPropagation() return false 之类的所有方法，但没有任何效果..
这是 jsfiddle 中的一个示例。需要更改 Wat 以防止显示默认上下文菜单
stage.on('click',stageClicked,true);
function stageClicked(event){
if(event.button==2){
event.cancelBubble = true;
event.preventDefault();
event.stopPropagation();
return false;
}
}
【问题讨论】：
标签： javascript html5-canvas contextmenu kineticjs
以上答案删除了上下文菜单，但不允许@user2045685 在右键单击时选择event.targetNode。
@user2045685 在他的 cmets 中指出，他通过使用 getAllIntersection 方法找到了解决方法，但我敦促您不要使用该替代方法，因为这不是它的用途，@987654325 @ 方法的性能非常差，使用 event.targetNode 效果很好。
getAllIntersections(pos)
获取与点相交的所有形状。 注意：由于此方法必须清除一个临时画布并重新绘制容器内的每个形状，因此只能在特殊情况下使用它，因为它的性能很差。请尽可能使用 Kinetic.Stage#getIntersection 方法，因为它的性能要好得多
来源：Kinetic.Container#getAllIntersections
相反，您可以将事件侦听器绑定到您的 div#container 并调用 event.preventDefault() 以禁用上下文菜单。
document.getElementById("container").addEventListener('contextmenu', function (event) {
event.preventDefault();
});
您还需要添加一个具有舞台宽度和高度的“背景矩形”，以便图层能够检测到您的点击。这就是为什么在上面@Brandon Boone 的回答中，他说“on 似乎没有做任何事情”。为舞台。 KineticJS 需要一个节点来监听事件，所以如果你不添加“透明背景”，那么stage.on("click") 只会在你右键单击绿色矩形时触发（而不是舞台的其余部分）。
var bg = new Kinetic.Rect({
width: stage.getWidth(),
height: stage.getHeight()
});
// add bg first as your transparent background
layer.add(bg);
// add the shape to the layer
layer.add(rect);
现在您可以毫无问题地使用您的stage.on('click', stgClicked) 函数并在您的stgClicked 函数中调用event.targetNode。
function stgClicked(event) {
if (event.button == 2) {
alert('rightclick');
var node = event.targetNode;
console.log(node);
}
}
【讨论】：
看起来您需要在舞台对象中找到画布引用并将contextmenu 事件直接附加到它，因为将其传递给on 似乎没有任何作用。
试试这个：
var canvas = stage.content.childNodes[0];
if (canvas.addEventListener) {
canvas.addEventListener('contextmenu', stgClicked, false);
} else if (canvas.attachEvent) {
canvas.attachEvent('oncontextmenu', stgClicked);
}
如果您想要 targetNode，只需在本机 JavaScript 事件中检查它。
function stgClicked(event){
var targetNode;
if (event.srcElement) targetNode = event.srcElement;
else if (event.target) targetNode = event.target;
alert(targetNode.nodeName);
}
【讨论】：