如何点击元素？

Question

我在同一位置有两个形状，颜色不同，当我点击它们时，我想在两个形状上触发点击事件，而不仅仅是第一个。

这两个形状在同一个容器中。

我在stage.on("mousemove")下试过getObjectsUnderPoint()，但是这个函数增加了我的FPS（60到32~，里面只有一个console.log），所以不是很好解决方案。

我尝试了气泡、useCapture，但我认为这不是我想要的。

我只想点击鼠标后面的所有元素。

如果有人有解决办法，请。

Answer 1

这里有几点：

EaselJS 对象的工作方式类似于 HTML DOM 元素。如果一个元素上有一个鼠标处理程序，它将阻止它下面的其他层次结构中的对象接收事件。这就是它的工作原理。主要区别在于，如果您没有鼠标事件，那么它们将被忽略（就像您将 HTML 元素上的 pointerEvents 设置为 none 让鼠标忽略它一样).

你对 getObjectsUnderPoint 的想法是我推荐的。运行 mousemove 上的任何命中测试逻辑都会很昂贵（mousemove 会触发很多，这就是为什么如果您 enableMouseOver 在舞台上，我们可以限制典型的鼠标悬停检查）。

一些优化它的东西：

确保您在 getObjectsUnderPoint 上使用 mode=2，这将只使用鼠标侦听器检查对象。这大大减少了检查的开销。 [docs]
不是在您自己的 mousemove 事件上检查舞台，而是设置一个标记以在滴答时检查它。这至少会限制您的 Ticker FPS。您还可以设置一个时间间隔以减少检查频率。它会产生一点可见的滞后，但您可能会找到一个很好的平衡点。
减少检查的内容。如果您有一个包含可点击元素的容器，您只能检查该对象是否有鼠标交互。

如果您的对象与完全相同，您也可以只触发对第二个项目的手动点击。

obj1.on("click", function(event) {
  obj2.dispatchEvent(event);
});

希望这些方法能为您提供解决方案。如果您有后续问题，请告诉我。

干杯，

如何点击元素？

How to click through elements?

easeljs

createjs