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

Question

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

为实现此目的，我在aframe场景中为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
})

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

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

提琴here