javascript - 使鼠标事件的对象“透明”？

Question

我正在使用 HTML5 Canvas 和 KineticJS 开发一个项目。一个半透明的覆盖（KineticJS 组或层）被放置在整个场景中。问题是：绑定到此覆盖下的 KineticJS 对象的鼠标事件未得到处理。

如何使这个覆盖（或任何其他对象）对鼠标事件“透明”？

注意：问题只是关于画布，没有其他 HTML 元素干扰它。（为了弄清楚下面的问题。）

Answer 1

假设您的意思是 HTML 元素放置在您的画布上，请尝试查看指针事件：MDN上的指针事件

例如

#foo {
    pointer-events:none;
}

Answer 2

是的，您可以单击顶部节点到底部节点，类似于 pointer-events:none

你只是告诉你的顶级对象不要听事件......像这样：

myTopObject.setListening(false);

现在所有鼠标事件都会冒泡到底部对象。

有关代码和小提琴，请参见此 SO 答案：Kineticjs 中的指针事件

Answer 3

在图层级别设置不透明度也会将不透明度设置为对象级别。

layer.setOpacity(0.1);

“未处理绑定到此覆盖下的 KineticJS 对象的鼠标事件。”

嗯，虽然您的叠加层（层）的不透明度为 0，但绑定到对象的鼠标事件已被处理。这似乎工作正常，我不知道您在做什么。

“我怎样才能使这个覆盖（或任何其他对象）对鼠标事件“透明”？对我来说，mouseover/mouseout 在图层级别上都可以正常工作以使其半透明。

  layer.on('mouseover', function() {
     this.setOpacity(0.5);
     this.draw();
  });

  layer.on('mouseout', function() {
     this.setOpacity(1);
     this.draw();
  });

你失踪了layer.draw()吗？