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

Posted 2023-03-24

【中文标题】使鼠标事件的对象“透明”？

【英文标题】：Making an Object "transparent" for Mouse Events?

【发布时间】：2013-03-26 10:36:09

【问题描述】：

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

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

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

【参考方案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 也不是我的解决方案。