3

我需要在点击舞台时禁用动力学 js 中的上下文菜单。我已经尝试了一切，如，，，但event.preventDefault()没有任何效果..cancelbubbleevent.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/

4

2 回答 2

3

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

@user2045685 在他的评论中指出，他通过使用该方法找到了解决getAllIntersection方法，但我敦促您不要使用该替代方法，因为这不是它的目的，该getAllIntersection方法性能非常差，并且使用event.targetNode效果很好。

getAllIntersections(位置)

获取与点相交的所有形状。注意：因为这种方法必须清除一个临时画布并重新绘制容器内的每个形状，所以它应该只用于特殊情况，因为它的性能很差。请尽可能使用 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

于 2013-07-23T14:34:17.860 回答
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);
}
于 2013-07-23T01:58:19.803 回答