如何获得元素ID +单击元素的鼠标按钮？

Question

我对AFrame事件有疑问。 当用户用鼠标单击aframe元素时，我想知道两件事：1）被单击元素的ID，以及2）使用了哪个鼠标按钮

为实现此目的，我为aframedown事件中的mousedown事件添加了一个事件侦听器（将来也需要将其用于悬停，mouseup等）。 单击aframe元素时，事件侦听器将每次使用不同的参数执行3次。

对象1：包含被点击的aframe元素/基本体的ID
对象2：包含Aframe场景
对象3：包含有关使用哪个鼠标按钮的信息（“哪个”属性）

看来我必须结合事件监听器的第一次和第三次执行的信息。 这似乎是一种解决方法，但不是一种平滑的解决方案。 这真的是在AFrame中实现的方法吗？ 在某些情况下可能会中断吗？ 三个执行的顺序是否得到保证？

示例： https ： //codesandbox.io/s/n035zom4o4

顺便说一句，我还尝试向每个aframe元素（不仅是框）添加一个自己的事件侦听器，但问题仍然存在。

Answer 1

您的侦听器已连接到a-scene因此您可以捕获多个冒泡事件。 而且，由a-frame框架创建的控件与标准MouseEvent有所不同。

按钮ID不会保留在a-frame的事件包装器中，因此您必须使用MouseEvent来监听文档。

document.addEventListener("click", (e)=> {
  console.log(e.buttons) // button id
})

但您需要检查cursor组件中的target ID：

cursor.intersectedEl.id // cursor refers to the active cursor component

在这里摆弄