How to get click event with javascript from an A-frame element

Question

UPDATE: You can use onclick= function();in the HTML.

For example: <a-box onclick="myFunction()"></a-box>

I want to get click event of cursor with javascript from an A-frame element, like a box for example, how can I do it?

Check https://aframe.io/docs/0.8.0/introduction/interactions-and-controllers.html — Jaider, Jan 20 '19 at 11:15

score 3 · Accepted Answer · answered Nov 14 '16 at 19:21

3

If you are using the cursor component:

box.addEventListener('click', function (evt) { // ... });

If you want to use the mouse cursor, try https://www.npmjs.com/package/aframe-mouse-cursor-component

answered Nov 14 '16 at 19:21

ngokevin

12,980
2
38
84

if I have more boxes than one then how can I select which one was clicked? – gabor aron Nov 14 '16 at 20:14
You know which box will be clicked from within the event handler. – ngokevin Nov 14 '16 at 23:25
Can we capture a click anywhere on the scene by using a_scene.addEventListener ? – Dunatotatos Mar 03 '17 at 15:40
that fiddle doesn't work in Chrome - "pointer lock on an element because the element's frame is sandboxed and the 'allow-pointer-lock' permission is not set." – Rid Iculous Aug 29 '17 at 10:45

score 1 · Answer 2 · answered Feb 22 '21 at 13:38

You could create a custom component like this;

<script>
AFRAME.registerComponent('clickhandler', {
        schema: {
          txt: {default:'default'}
        },        
        init: function () {
          var data = this.data;
          var el = this.el;        
          el.addEventListener('click', function () {            
           console.log(data.txt);
          });        
        }
      });
</script>

<a-image src="img1.png" clickhandler="txt:image1"></a-image>
<a-box clickhandler="txt:box1"></a-box>

<a-entity cursor="rayOrigin:mouse"></a-entity>

More info here https://aframe.io/docs/1.2.0/core/component.html

How to get click event with javascript from an A-frame element

2 Answers2