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

Posted 2023-03-24

【中文标题】防止在 kineticJS 阶段右键单击默认上下文菜单？

【英文标题】：Prevent default context menu in kinetic JS stage rightclick?

【发布时间】：2013-07-21 22:08:04

【问题描述】：

我需要在点击舞台时禁用动力学 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/

【参考方案1】：

以上答案删除了上下文菜单，但不允许@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);
  

JSfiddle

【参考方案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 事件返回到我的 stgClicked 函数，在该函数中我将使用 event.targetNode 来获取它被右键单击的确切形状...

我的意思是目标节点作为正在点击的动力学形状。在这种情况下，如果我右键单击它上面的矩形。我应该将目标节点作为 Kinetic.Rect 对象及其所有我可以访问的属性..通过将事件传递给动力学js的getAllIntersection方法以获取低于当前鼠标位置的形状，我找到了另一种方法..但这不是那么准确...

请不要使用getAllIntersection方法来选择你的targetNode！请参阅下面的答案。