OnClick on model in AFrame-AR.js scene

I am working on an Augmented reality scene using Aframe and ARJS. I am currently rendering obj models when the marker is detected. My requirement is to be able to click on individual models upon rendering and manipulate them. For some reason onclick doesnt seem to be working on aframe model entities but it works fine on other primitive entities like box . This is my approach -

AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {

  console.log('I was clicked at: ', evt.detail.intersection.point);
 });
}
});
</script>
</head>  
<body>
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;' foo>
    <a-assets>
        <a-asset-item id="crate-obj" src="model.obj"></a-asset-item>
        <a-asset-item id="crate-mtl" src="model.mtl"></a-asset-item>
        <img id="texture" src="brick.jpg">
    </a-assets>


  <a-marker preset='hiro'>
    <a-entity ><a-obj-model class="collidable" cursor-listener id="animated-marker" src="#crate-obj" position="0 -1.6 0" mtl="#crate-mtl" rotation="-90 0 0" scale="0.004 0.004 0.004" material="" obj-model=""></a-obj-model></a-entity> 
   //onclick doesn't work
    <a-entity  material=" src: url(box.png) " class="collidable" cursor- 
  listener position="0 -1 0"></a-entity>  //onclick works here

  </a-marker>
  <a-camera-static/>
  </a-scene>
  </body>
  </html>

Is there anything I might be overlooking ? Or is there any other way to achieve this requirement.Thanks.

Solution

You need to use the cursor component, since the click event is based on raytracing in 3D.

<a-marker preset='hiro' cursor='rayOrigin: mouse'></a-marker>