Как получить идентификатор элемента + кнопку мыши по нажатому элементу?

Question

У меня есть вопросы о событиях AFrame. Когда пользователь щелкает мышью по элементу рамки, я хочу знать две вещи: 1) идентификатор элемента, по которому щелкнули, и 2) какая кнопка мыши была использована

Чтобы добиться этого, я добавил слушателя события в рамку кадра для события mousedown (оно понадобится также для hover, mouseup и т. Д. В будущем). При нажатии на элемент aframe прослушиватель событий запускается три раза с другим параметром каждый раз.

Объект 1: содержит идентификатор элемента / примитива aframe, по которому щелкнули
Объект 2: содержит рамку кадра
Объект 3: содержит информацию о том, какая кнопка мыши была использована (атрибут which)

Похоже, мне нужно объединить информацию из первого и третьего выполнения EventListener. Похоже, это какой-то обходной путь, но не гладкое решение. Это действительно способ сделать это в AFrame? Есть ситуации, когда это может сломаться? Гарантирован ли порядок трех казней?

Пример: https://codesandbox.io/s/n035zom4o4

Кстати, я также пытался добавить собственный слушатель событий для каждого элемента рамки, а не только для блока, но проблема все еще возникает.

Answer 1

Ваш слушатель подключен к a-scene, так что вы перехватываете несколько всплывающих событий. Более того, созданные a-frame фреймворки отличаются от стандартных MouseEvent .

Идентификатор кнопки не сохраняется в оболочке событий a-frame s, поэтому вы должны использовать MouseEvent для прослушивания документа.

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

но вам нужно проверить идентификатор target в компоненте cursor:

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

скрипка здесь