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

【问题标题】：Making an Object "transparent" for Mouse Events?使鼠标事件的对象“透明”？
【发布时间】：2013-03-26 10:36:09
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html5-canvas dom-events kineticjs

【解决方案1】：

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

例如

#foo {
    pointer-events:none;
}

【讨论】：

我也会使用它，但请注意它存在跨浏览器的兼容性问题。
感谢您的回答。但是，正如我在最初的帖子中编辑的那样，我并不是指任何 HTML 元素。
嗯，有道理。查看文档，我无法立即看到使用他们的 API 执行此操作的任何方法；此叠加层是否需要与场景的其余部分位于同一画布元素中？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

myTopObject.setListening(false);

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

有关代码和 Fiddle，请参阅此 SO 答案：pointer-events in Kineticjs

【讨论】：

有没有办法使用 jQuery 或常规 Javascript 来做到这一点？ pointer-events: none 也不是我的解决方案。