如何使一个对象在鼠标事件中“透明”？

Question

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

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

注意：此问题仅涉及Canvas，没有其他HTML元素干扰它。（为了清楚下面所问的内容。）

- Michael

Answer 1

假设您的意思是HTML元素覆盖在画布上，请查看指针事件： MDN上的指针事件 例如：

#foo {
    pointer-events:none;
}

- Graham

---

我也会使用它，但请注意它在不同浏览器之间存在兼容性问题。 - Rodik

谢谢您的回答。但是，正如我在初始帖子中编辑的那样，我并不是指任何HTML元素。 - Michael

啊，好的，这样说起来就有点道理了。看了一下文档，我没有立刻找到使用他们的API来完成这个任务的方法；那么这个覆盖层需不需要和场景中的其他元素在同一个画布元素上？ - Graham

Answer 2

是的，您可以通过类似 pointer-events:none 的方式点击顶部节点到底部节点。

您只需告诉顶部对象不要监听事件，就像这样：

myTopObject.setListening(false);

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

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

- markE

---

有没有使用jQuery或常规Javascript的方法可以实现这一点？对我来说，“pointer-events: none”也不是解决方案。 - RaisinBranCrunch

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()？

- allenhwkim