Question

我需要在点击阶段时禁用kinetic 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;
   }
}

http://jsfiddle.net/xPbgf/

Answer 1

上述答案会删除上下文菜单，但不允许@ user2045685选择右键单击event.targetNode。

@ user2045685在他的评论中指出他使用getAllIntersection方法找到了一种解决方法，但我敦促你不要使用那种替代品，因为这不是它的用途， getAllIntersection方法的效果非常差，使用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)功能，并在event.targetNode功能内拨打stgClicked。

function stgClicked(event) {
  if (event.button == 2) {
     alert('rightclick');
     var node = event.targetNode;
     console.log(node);
  }
}

JSfiddle

Answer 2

看起来您需要在舞台对象中找到画布引用并将contextmenu事件直接附加到它，因为将其传递到on似乎什么都不做。

试试这个：

的 Live Demo

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); }

在动态JS阶段右键单击防止默认上下文菜单？

2 个答案: