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

Question

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

如何使此叠加层（或任何其他对象）对鼠标事件“透明”？

注意：问题仅与Canvas有关，没有其他HTML元素会干扰Canvas。 （以澄清下面的要求。）

Answer 1

假设您是将HTML元素放置在画布上，请尝试查看指针事件：pointer events at MDN

例如

#foo {
    pointer-events:none;
}

Answer 2

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

layer.setOpacity(0.1);

“未处理此叠加层下绑定到KineticJS对象的鼠标事件。”

嗯，尽管您的overlay（layer）的不透明度为0，但是绑定到对象的鼠标事件仍会被处理。这似乎工作正常，我不知道您要进入什么。

“如何使此叠加层（或任何其他对象）对鼠标事件“透明”？”对我来说，将鼠标悬停/鼠标悬停都可以在图层级别上正常工作，以使其半透明。

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

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

您是否缺少layer.draw()？

Answer 3

是的，您可以将顶部节点单击到底部节点，类似于指针事件：无

您只是告诉您的最高对象不要听事件……就像这样：

myTopObject.setListening(false);

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

请参见此SO答案以获取代码和Fiddle：pointer-events in Kineticjs